WIP: bsc#1225196 part 2

web/html/src/components/datetime/DateTimePicker.tsx

@@ -89,8 +89,8 @@ export const DateTimePicker = (props: Props) => {
 
   // We use localizedMoment to clone the date so we don't modify the original
   const browserTimezoneValue = localizedMoment(props.value)
-    // We convert the date to the users configured timezone because this is what we want to show the user
-    .tz(localizedMoment.userTimeZone)
+    // We convert the date to the user's or server's configured timezone because this is what we want to show the user
+    .tz(timeZone)
     // The react-datepicker component only shows the browsers local timezone and will convert any date to that
     // before showing so since we already got the date with the right values we now pretend the date we have is in
     // the browsers local timezone but without changing its values. This will prevent the react component from

web/html/src/manager/recurring/recurring-actions-details.tsx

@@ -11,6 +11,7 @@ import { TopPanel } from "components/panels/TopPanel";
 import { Column } from "components/table/Column";
 import { Table } from "components/table/Table";
 
+import { localizedMoment } from "utils";
 import Network from "utils/network";
 
 import { DisplayHighstate } from "../state/display-highstate";
@@ -94,14 +95,16 @@ class RecurringActionsDetails extends React.Component<RecurringActionsDetailsPro
           ) : details.type === "daily" ? (
             <td>
               {"Every day at "}
-              <b>{details.cronTimes.hour + ":" + details.cronTimes.minute}</b>
+              <b>{`${details.cronTimes.hour}:${details.cronTimes.minute} `}</b>
+              {localizedMoment.serverTimeZoneAbbr}
             </td>
           ) : details.type === "weekly" ? (
             <td>
               {"Every "}
               <b>{this.weekDays[details.cronTimes.dayOfWeek - 1]}</b>
               {" at "}
-              <b>{details.cronTimes.hour + ":" + details.cronTimes.minute}</b>
+              <b>{`${details.cronTimes.hour}:${details.cronTimes.minute} `}</b>
+              {localizedMoment.serverTimeZoneAbbr}
             </td>
           ) : (
             <td>
@@ -143,6 +146,10 @@ class RecurringActionsDetails extends React.Component<RecurringActionsDetailsPro
     details.cronTimes.hour = details.cronTimes.hour.padStart(2, "0");
     details.cronTimes.minute = details.cronTimes.minute.padStart(2, "0");
 
+    // Creation time is always retrieved in server's timezone
+    // Parse the date and show it in user's timezone
+    const createdAt = localizedMoment.fromServerDateTimeString(details.createdAt).toUserDateTimeString();
+
     return (
       <BootstrapPanel title={t("Schedule Details")}>
         <div className="table-responsive">
@@ -177,7 +184,7 @@ class RecurringActionsDetails extends React.Component<RecurringActionsDetailsPro
               {
                 <tr>
                   <td>{t("Created at")}:</td>
-                  <td>{details.createdAt + " " + window.timezone}</td>
+                  <td>{createdAt + " " + localizedMoment.userTimeZoneAbbr}</td>
                 </tr>
               }
               {this.getExecutionText(details)}

web/html/src/utils/datetime/localizedMoment.ts

@@ -44,9 +44,8 @@ declare global {
   }
 }
 
-if (process.env.NODE_ENV !== "production") {
-  (window as any).localizedMoment = localizedMomentConstructor;
-}
+// This is for debugging purposes only, if you need to use this module, import it properly
+(window as any).localizedMoment = localizedMomentConstructor;
 
 function validateOrGuessTimeZone(input: string | undefined, errorLabel: "Server" | "User") {
   try {
@@ -139,6 +138,13 @@ declare module "moment" {
   const userTimeZone: string;
   /** Abbreviated user time zone string, e.g. `"JST"` */
   const userTimeZoneAbbr: string;
+
+  /**
+   * Parse a date time string provided in the server time zone, e.g. `localizedMoment.fromServerString("May 29, 2024, 11:26:06 AM")`.
+   *
+   * @deprecated This function exists for backwards compatibility, for new backend code use ISO 8601 and call `localizedMoment(input)` directly.
+   */
+  const fromServerDateTimeString: (input: string) => moment.Moment;
 }
 
 moment.fn.toServerString = function (this: moment.Moment): string {
@@ -197,6 +203,13 @@ Object.defineProperties(moment, {
       return (userTimeZoneAbbr ??= moment().tz(config.userTimeZone).format("z"));
     },
   },
+  fromServerDateTimeString: {
+    get() {
+      // TODO: Is this format string correct? Maybe there's a library constant we can use here?
+      return (input: string): moment.Moment =>
+        moment.tz(input, "MMM DD, YYYY, HH:mm:ss A", true, config.serverTimeZone);
+    },
+  },
 });
 
 const parseTimeString = function (input: string): { hours: number; minutes: number } | null {
@@ -218,7 +231,9 @@ function localizedMomentConstructor(input?: moment.MomentInput) {
       : moment(input, true).utc().tz("UTC");
 
   if (!utcMoment.isValid()) {
-    throw new RangeError("Invalid localized moment on input " + JSON.stringify(input));
+    throw new RangeError(
+      `Invalid input for localized moment, got input with type "${typeof input}" and value ${input}`
+    );
   }
 
   return utcMoment;

web/spacewalk-web.changes.cbbayburt.bsc1225196

@@ -0,0 +1,3 @@
+- Show proper timezones in recurring action details
+- Fix displayed time in datetime pickers that use server's 
+  timezone (bsc#1225196)