From 7ac54fbeb0d6dda1c2b2c725ae5d3ebb49fef022 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 11 Sep 2025 17:08:51 -0600
Subject: [PATCH] Show timezone set on schedule spec in schedule form

---
 .../schedule/schedule-day-of-month-view.svelte         |  3 ++-
 .../schedule/schedule-day-of-week-view.svelte          |  3 ++-
 src/lib/components/schedule/schedule-form-view.svelte  |  2 ++
 .../components/schedule/schedules-calendar-view.svelte |  9 ++++++++-
 src/lib/components/schedule/schedules-time-view.svelte | 10 ++++++++--
 src/lib/i18n/locales/en/schedules.ts                   |  2 +-
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/schedule/schedule-day-of-month-view.svelte b/src/lib/components/schedule/schedule-day-of-month-view.svelte
index cb67092863..3731bb6b04 100644
--- a/src/lib/components/schedule/schedule-day-of-month-view.svelte
+++ b/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>
diff --git a/src/lib/components/schedule/schedule-day-of-week-view.svelte b/src/lib/components/schedule/schedule-day-of-week-view.svelte
index f16bf13045..03c296009e 100644
--- a/src/lib/components/schedule/schedule-day-of-week-view.svelte
+++ b/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>
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index 887b0dd079..94b59ea586 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/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
diff --git a/src/lib/components/schedule/schedules-calendar-view.svelte b/src/lib/components/schedule/schedules-calendar-view.svelte
index 7829122c06..fd1c550fb8 100644
--- a/src/lib/components/schedule/schedules-calendar-view.svelte
+++ b/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,7 +107,12 @@
       />
     </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
@@ -114,6 +120,7 @@
         bind:months
         bind:hour
         bind:minute
+        {timezoneName}
       />
     </TabPanel>
     <TabPanel
diff --git a/src/lib/components/schedule/schedules-time-view.svelte b/src/lib/components/schedule/schedules-time-view.svelte
index a2d88f2c1b..c0b3837dc1 100644
--- a/src/lib/components/schedule/schedules-time-view.svelte
+++ b/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>
diff --git a/src/lib/i18n/locales/en/schedules.ts b/src/lib/i18n/locales/en/schedules.ts
index d7c3423b46..7762b9be5c 100644
--- a/src/lib/i18n/locales/en/schedules.ts
+++ b/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).',