Show timezone set in Schedule spec in form

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 {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 {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 ?? 'UTC';
 
   const decodedSearchAttributes = decodePayloadAttributes({ searchAttributes });
   const decodedWorkflowSearchAttributes = decodePayloadAttributes({
@@ -256,6 +257,7 @@
           bind:second
           bind:phase
           bind:cronString
+          {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
+        {timezoneName}
+      />
     </TabPanel>
     <TabPanel id="monthly-panel" tabId="monthly-tab">
       <ScheduleDayOfMonthView
         bind:daysOfMonth
         bind:months
         bind:hour
         bind:minute
+        {timezoneName}
       />
     </TabPanel>
     <TabPanel

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

@@ -5,6 +5,12 @@
 
   export let hour = '';
   export let minute = '';
+  export let timezoneName: string;
+
+  $: timezoneHint =
+    timezoneName.toLowerCase() === 'utc'
+      ? 'Universal Standard Time (UTC)'
+      : timezoneName;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -13,7 +19,7 @@
       {translate('schedules.time-view-heading')}
     </h3>
     <p class="text-secondary">
-      {translate('schedules.time-view-description')}
+      {translate('schedules.time-view-description', { timezoneName })}
     </p>
 
     <TimePicker
@@ -27,7 +33,7 @@
   <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)
+      >{translate('common.based-on-time-preface')} {timezoneHint}
     </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 ({{- timezoneName}}) for this schedule to run. By default, the schedule will run at 00:00 {{- timezoneName}} 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).',