Fix scheduler date input and display (#1472)

Fixes #1255

### Changes

- Fixes incorrect time zone conversion when generating UTC schedule in
workflow.
- Fixes minute input display not prefixing single digits with `0`

Co-authored-by: emma <hi@emma.cafe>

frontend/src/components/ui/time-input.ts

@@ -86,7 +86,8 @@ export class TimeInput extends LitElement {
               value=${this.hour}
               ?disabled=${this.disabled}
               required
-              @keyup=${(e: KeyboardEvent) => {
+              @sl-change=${async (e: Event) => {
+                e.stopPropagation();
                 const input = e.target as SlInput;
                 if (input.value) {
                   const int = +input.value.replace(/[^0-9]/g, "");
@@ -94,10 +95,7 @@ export class TimeInput extends LitElement {
                 } else {
                   input.value = "12";
                 }
-              }}
-              @sl-change=${async (e: Event) => {
-                e.stopPropagation();
-                const input = e.target as SlInput;
+
                 await input.updateComplete;
                 this.hour = +input.value;
                 this.dispatchChange();
@@ -114,18 +112,19 @@ export class TimeInput extends LitElement {
                 : this.minute}
               ?disabled=${this.disabled}
               required
-              @keyup=${(e: KeyboardEvent) => {
-                const input = e.target as SlInput;
-                if (input.value) {
-                  const int = +input.value.replace(/[^0-9]/g, "");
-                  input.value = `${Math.min(59, Math.max(0, int))}`;
-                } else {
-                  input.value = "00";
-                }
-              }}
               @sl-change=${async (e: Event) => {
                 e.stopPropagation();
                 const input = e.target as SlInput;
+                if (input.value) {
+                  const int = Math.min(
+                    59,
+                    Math.max(0, +input.value.replace(/[^0-9]/g, ""))
+                  );
+                  input.value = int < 10 ? `0${int}` : `${int}`;
+                } else {
+                  input.value = "00";
+                }
+
                 await input.updateComplete;
                 this.minute = +input.value;
                 this.dispatchChange();

frontend/src/pages/org/workflow-editor.ts

@@ -1672,7 +1672,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
           label=${msg("User Agent")}
           autocomplete="off"
           placeholder=${msg("Default")}
-          value=${this.formState.userAgent}
+          value=${this.formState.userAgent || ""}
         >
         </sl-input>
       `)}

frontend/src/utils/cron.ts

@@ -10,11 +10,9 @@ export type ScheduleInterval = "daily" | "weekly" | "monthly";
 /**
  * Parse interval from cron expression
  **/
-export function getScheduleInterval(
-  schedule: string
-): "daily" | "weekly" | "monthly" {
-  const [_minute, _hour, dayofMonth, _month, dayOfWeek] = schedule.split(" ");
-  if (dayofMonth === "*") {
+export function getScheduleInterval(schedule: string): ScheduleInterval {
+  const [_minute, _hour, dayOfMonth, _month, dayOfWeek] = schedule.split(" ");
+  if (dayOfMonth === "*") {
     if (dayOfWeek === "*") {
       return "daily";
     }
@@ -63,7 +61,7 @@ export function humanizeNextDate(
 export function humanizeSchedule(
   schedule: string,
   options: { length?: "short" } = {},
-  numberFormatter: any = numberUtils.numberFormatter
+  numberFormatter = numberUtils.numberFormatter
 ): string {
   const interval = getScheduleInterval(schedule);
   const parsed = parseCron(schedule);
@@ -77,7 +75,7 @@ export function humanizeSchedule(
     weekday: "long",
   });
 
-  let intervalMsg: any = "";
+  let intervalMsg = "";
 
   if (options.length === "short") {
     switch (interval) {
@@ -123,7 +121,7 @@ export function humanizeSchedule(
         break;
       case "monthly":
         intervalMsg = msg(
-          str`On day ${days[0]} of the month at ${formattedTime}`
+          str`On day ${nextDate.getDate()} of the month at ${formattedTime}`
         );
         break;
       default:
@@ -168,9 +166,15 @@ export function getUTCSchedule({
 
   localDate.setHours(+hour + periodOffset);
   localDate.setMinutes(+minute);
-  const date =
-    interval === "monthly" ? dayOfMonth || localDate.getUTCDate() : "*";
-  const day = interval === "weekly" ? dayOfWeek || localDate.getUTCDay() : "*";
+
+  if (interval === "monthly" && dayOfMonth) {
+    localDate.setDate(dayOfMonth);
+  } else if (interval == "weekly" && dayOfWeek) {
+    localDate.setDate(localDate.getDate() + dayOfWeek - localDate.getDay());
+  }
+
+  const date = interval === "monthly" ? localDate.getUTCDate() : "*";
+  const day = interval === "weekly" ? localDate.getUTCDay() : "*";
   const month = "*";
 
   const schedule = `${localDate.getUTCMinutes()} ${localDate.getUTCHours()} ${date} ${month} ${day}`;