@oneuptime/common 8.0.5129 → 8.0.5139

package/Server/Services/ScheduledMaintenanceService.ts

@@ -261,7 +261,7 @@ export class Service extends DatabaseService<Model> {
           if (subscriber.slackIncomingWebhookUrl) {
             const slackMessage: string = `## 🔧 Scheduled Maintenance - ${event.title || ""}
 
-**Scheduled Date:** ${OneUptimeDate.getDateAsFormattedString(event.startsAt!)}
+**Scheduled Date:** ${OneUptimeDate.getDateAsUserFriendlyFormattedString(event.startsAt!)}
 
 ${resourcesAffected ? `**Resources Affected:** ${resourcesAffected}` : ""}
 
@@ -305,6 +305,7 @@ ${resourcesAffected ? `**Resources Affected:** ${resourcesAffected}` : ""}
                     OneUptimeDate.getDateAsFormattedHTMLInMultipleTimezones({
                       date: event.startsAt!,
                       timezones: statuspage.subscriberTimezones || [],
+                      use12HourFormat: true,
                     }),
                   eventTitle: event.title || "",
                   eventDescription: await Markdown.convertToHTML(
@@ -769,11 +770,11 @@ ${scheduledMaintenance.description || "No description provided."}
 
       // add starts at and ends at.
       if (scheduledMaintenance.startsAt) {
-        feedInfoInMarkdown += `**Starts At**: ${OneUptimeDate.getDateAsLocalFormattedString(scheduledMaintenance.startsAt)} \n\n`;
+        feedInfoInMarkdown += `**Starts At**: ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(scheduledMaintenance.startsAt)} \n\n`;
       }
 
       if (scheduledMaintenance.endsAt) {
-        feedInfoInMarkdown += `**Ends At**: ${OneUptimeDate.getDateAsLocalFormattedString(scheduledMaintenance.endsAt)} \n\n`;
+        feedInfoInMarkdown += `**Ends At**: ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(scheduledMaintenance.endsAt)} \n\n`;
       }
 
       if (scheduledMaintenance.currentScheduledMaintenanceState?.name) {
@@ -1064,7 +1065,7 @@ ${onUpdate.updateBy.data.title || "No title provided."}
           // add scheduledMaintenance feed.
 
           feedInfoInMarkdown += `\n\n**Starts At**: 
-${OneUptimeDate.getDateAsLocalFormattedString(onUpdate.updateBy.data.startsAt as Date) || "No title provided."}
+${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(onUpdate.updateBy.data.startsAt as Date) || "No title provided."}
 `;
           shouldAddScheduledMaintenanceFeed = true;
         }
@@ -1073,7 +1074,7 @@ ${OneUptimeDate.getDateAsLocalFormattedString(onUpdate.updateBy.data.startsAt as
           // add scheduledMaintenance feed.
 
           feedInfoInMarkdown += `\n\n**Ends At**:
-${OneUptimeDate.getDateAsLocalFormattedString(onUpdate.updateBy.data.endsAt as Date) || "No title provided."}
+${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(onUpdate.updateBy.data.endsAt as Date) || "No title provided."}
 `;
           shouldAddScheduledMaintenanceFeed = true;
         }

package/Server/Services/StatusPageService.ts

@@ -877,7 +877,7 @@ export class Service extends DatabaseService<StatusPage> {
 
     const endDate: Date = OneUptimeDate.getCurrentDate();
     const startDate: Date = OneUptimeDate.getSomeDaysAgo(numberOfDays);
-    const startAndEndDate: string = `${numberOfDays} days (${OneUptimeDate.getDateAsLocalFormattedString(startDate, true)} - ${OneUptimeDate.getDateAsLocalFormattedString(endDate, true)})`;
+    const startAndEndDate: string = `${numberOfDays} days (${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(startDate, true)} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(endDate, true)})`;
 
     if (statusPageResources.length === 0) {
       return {

package/Tests/UI/Components/MarkdownEditor.test.tsx

@@ -1,9 +1,55 @@
 import React from "react";
 import MarkdownEditor from "../../../UI/Components/Markdown.tsx/MarkdownEditor";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, expect, test } from "@jest/globals";
 
-describe("MarkdownEditor with SpellCheck", () => {
+describe("MarkdownEditor", () => {
+  test("should render with toolbar buttons", () => {
+    render(
+      <MarkdownEditor
+        initialValue="This is a test"
+        placeholder="Enter markdown here..."
+      />,
+    );
+
+    // Check for toolbar buttons
+    expect(screen.getByTitle("Bold (Ctrl+B)")).toBeInTheDocument();
+    expect(screen.getByTitle("Italic (Ctrl+I)")).toBeInTheDocument();
+    expect(screen.getByTitle("Underline")).toBeInTheDocument();
+    expect(screen.getByTitle("Strikethrough")).toBeInTheDocument();
+    expect(screen.getByTitle("Heading 1")).toBeInTheDocument();
+    expect(screen.getByTitle("Heading 2")).toBeInTheDocument();
+    expect(screen.getByTitle("Heading 3")).toBeInTheDocument();
+    expect(screen.getByTitle("Bullet List")).toBeInTheDocument();
+    expect(screen.getByTitle("Numbered List")).toBeInTheDocument();
+    expect(screen.getByTitle("Task List")).toBeInTheDocument();
+    expect(screen.getByTitle("Link")).toBeInTheDocument();
+    expect(screen.getByTitle("Image")).toBeInTheDocument();
+    expect(screen.getByTitle("Table")).toBeInTheDocument();
+    expect(screen.getByTitle("Code")).toBeInTheDocument();
+    expect(screen.getByTitle("Quote")).toBeInTheDocument();
+    expect(screen.getByTitle("Horizontal Rule")).toBeInTheDocument();
+  });
+
+  test("should toggle preview mode", () => {
+    render(
+      <MarkdownEditor
+        initialValue="**bold text**"
+        placeholder="Enter markdown here..."
+      />,
+    );
+
+    const previewButton: HTMLElement = screen.getByText("Preview");
+    fireEvent.click(previewButton);
+
+    // Should show preview
+    expect(screen.getByText("Write")).toBeInTheDocument();
+
+    // Click to go back to write mode
+    fireEvent.click(screen.getByText("Write"));
+    expect(screen.getByText("Preview")).toBeInTheDocument();
+  });
+
   test("should enable spell check by default", () => {
     render(
       <MarkdownEditor
@@ -18,6 +64,21 @@ describe("MarkdownEditor with SpellCheck", () => {
     expect(textarea.spellcheck).toBe(true);
   });
 
+  test("should enable spell check when disableSpellCheck is undefined", () => {
+    render(
+      <MarkdownEditor
+        initialValue="This is a test with spelling errors"
+        placeholder="Enter markdown here..."
+        disableSpellCheck={undefined}
+      />,
+    );
+
+    const textarea: HTMLTextAreaElement = screen.getByRole(
+      "textbox",
+    ) as HTMLTextAreaElement;
+    expect(textarea.spellcheck).toBe(true);
+  });
+
   test("should disable spell check when disableSpellCheck is true", () => {
     render(
       <MarkdownEditor
@@ -58,4 +119,28 @@ describe("MarkdownEditor with SpellCheck", () => {
     textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
     expect(textarea.spellcheck).toBe(false);
   });
+
+  test("should show help text", () => {
+    render(
+      <MarkdownEditor initialValue="" placeholder="Enter markdown here..." />,
+    );
+
+    expect(screen.getByText("Markdown help")).toBeInTheDocument();
+  });
+
+  test("should handle onChange callback", () => {
+    const mockOnChange: jest.Mock = jest.fn();
+    render(
+      <MarkdownEditor
+        initialValue=""
+        placeholder="Enter markdown here..."
+        onChange={mockOnChange}
+      />,
+    );
+
+    const textarea: HTMLElement = screen.getByRole("textbox");
+    fireEvent.change(textarea, { target: { value: "new text" } });
+
+    expect(mockOnChange).toHaveBeenCalledWith("new text");
+  });
 });

package/Types/Date.ts

@@ -201,12 +201,19 @@ export default class OneUptimeDate {
     return this.secondsToFormattedFriendlyTimeString(seconds);
   }
 
-  public static toTimeString(date: Date | string): string {
+  public static toTimeString(
+    date: Date | string,
+    use12HourFormat?: boolean,
+  ): string {
     if (typeof date === "string") {
       date = this.fromString(date);
     }
 
-    return moment(date).format("HH:mm");
+    const format: "hh:mm A" | "HH:mm" =
+      use12HourFormat || this.getUserPrefers12HourFormat()
+        ? "hh:mm A"
+        : "HH:mm";
+    return moment(date).format(format);
   }
 
   public static isSame(date1: Date, date2: Date): boolean {
@@ -879,23 +886,72 @@ export default class OneUptimeDate {
   public static getCurrentDateAsFormattedString(options?: {
     onlyShowDate?: boolean;
     showSeconds?: boolean;
+    use12HourFormat?: boolean;
   }): string {
     return this.getDateAsFormattedString(new Date(), options);
   }
 
+  public static getUserPrefers12HourFormat(): boolean {
+    if (typeof window === "undefined") {
+      // Server-side: default to 12-hour format for user-friendly display
+      return true;
+    }
+
+    // Client-side: detect user's preferred time format from browser locale
+    const testDate: Date = new Date();
+    const timeString: string = testDate.toLocaleTimeString();
+    return (
+      timeString.toLowerCase().includes("am") ||
+      timeString.toLowerCase().includes("pm")
+    );
+  }
+
+  public static getDateAsUserFriendlyFormattedString(
+    date: string | Date,
+    options?: {
+      onlyShowDate?: boolean;
+      showSeconds?: boolean;
+    },
+  ): string {
+    return this.getDateAsFormattedString(date, {
+      ...options,
+      use12HourFormat: this.getUserPrefers12HourFormat(),
+    });
+  }
+
+  public static getDateAsUserFriendlyLocalFormattedString(
+    date: string | Date,
+    onlyShowDate?: boolean,
+  ): string {
+    return this.getDateAsLocalFormattedString(
+      date,
+      onlyShowDate,
+      this.getUserPrefers12HourFormat(),
+    );
+  }
+
   public static getDateAsFormattedString(
     date: string | Date,
     options?: {
       onlyShowDate?: boolean;
       showSeconds?: boolean;
+      use12HourFormat?: boolean;
     },
   ): string {
     date = this.fromString(date);
 
     let formatstring: string = "MMM DD YYYY, HH:mm";
 
+    if (options?.use12HourFormat) {
+      formatstring = "MMM DD YYYY, hh:mm A";
+    }
+
     if (options?.showSeconds) {
-      formatstring = "MMM DD YYYY, HH:mm:ss";
+      if (options?.use12HourFormat) {
+        formatstring = "MMM DD YYYY, hh:mm:ss A";
+      } else {
+        formatstring = "MMM DD YYYY, HH:mm:ss";
+      }
     }
 
     if (options?.onlyShowDate) {
@@ -1061,15 +1117,22 @@ export default class OneUptimeDate {
     date: string | Date;
     onlyShowDate?: boolean | undefined;
     timezones?: Array<Timezone> | undefined;
+    use12HourFormat?: boolean | undefined;
   }): Array<string> {
     let date: string | Date = data.date;
     const onlyShowDate: boolean | undefined = data.onlyShowDate;
     let timezones: Array<Timezone> | undefined = data.timezones;
+    const use12HourFormat: boolean =
+      data.use12HourFormat ?? this.getUserPrefers12HourFormat();
 
     date = this.fromString(date);
 
     let formatstring: string = "MMM DD YYYY, HH:mm";
 
+    if (use12HourFormat) {
+      formatstring = "MMM DD YYYY, hh:mm A";
+    }
+
     if (onlyShowDate) {
       formatstring = "MMM DD, YYYY";
     }
@@ -1106,15 +1169,18 @@ export default class OneUptimeDate {
     date: string | Date;
     onlyShowDate?: boolean;
     timezones?: Array<Timezone> | undefined; // if this is skipped, then it will show the default timezones in the order of UTC, EST, PST, IST, ACT
+    use12HourFormat?: boolean | undefined;
   }): string {
     const date: string | Date = data.date;
     const onlyShowDate: boolean | undefined = data.onlyShowDate;
     const timezones: Array<Timezone> | undefined = data.timezones;
+    const use12HourFormat: boolean | undefined = data.use12HourFormat;
 
     return this.getDateAsFormattedArrayInMultipleTimezones({
       date,
       onlyShowDate,
       timezones,
+      use12HourFormat,
     }).join("<br/>");
   }
 
@@ -1122,26 +1188,34 @@ export default class OneUptimeDate {
     date: string | Date;
     onlyShowDate?: boolean | undefined;
     timezones?: Array<Timezone> | undefined; // if this is skipped, then it will show the default timezones in the order of UTC, EST, PST, IST, ACT
+    use12HourFormat?: boolean | undefined;
   }): string {
     const date: string | Date = data.date;
     const onlyShowDate: boolean | undefined = data.onlyShowDate;
     const timezones: Array<Timezone> | undefined = data.timezones;
+    const use12HourFormat: boolean | undefined = data.use12HourFormat;
 
     return this.getDateAsFormattedArrayInMultipleTimezones({
       date,
       onlyShowDate,
       timezones,
+      use12HourFormat,
     }).join("\n");
   }
 
   public static getDateAsLocalFormattedString(
     date: string | Date,
     onlyShowDate?: boolean,
+    use12HourFormat?: boolean,
   ): string {
     date = this.fromString(date);
 
     let formatstring: string = "MMM DD YYYY, HH:mm";
 
+    if (use12HourFormat) {
+      formatstring = "MMM DD YYYY, hh:mm A";
+    }
+
     if (onlyShowDate) {
       formatstring = "MMM DD, YYYY";
     }

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -29,10 +29,10 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
 
   const getContent: GetReactElementFunction = (): ReactElement => {
     const title: string = isCustomRange
-      ? `${OneUptimeDate.getDateAsLocalFormattedString(
+      ? `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
             OneUptimeDate.getCurrentDate(),
-        )} - ${OneUptimeDate.getDateAsLocalFormattedString(
+        )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
             OneUptimeDate.getCurrentDate(),
         )}`

package/UI/Components/Detail/Detail.tsx

@@ -178,7 +178,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
     if (field.fieldType === FieldType.Date) {
       if (data) {
-        data = OneUptimeDate.getDateAsLocalFormattedString(
+        data = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           data as string,
           true,
         );
@@ -197,7 +197,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
     if (field.fieldType === FieldType.DateTime) {
       if (data) {
-        data = OneUptimeDate.getDateAsLocalFormattedString(
+        data = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           data as string,
           false,
         );

package/UI/Components/EventHistoryList/EventHistoryDayList.tsx

@@ -55,7 +55,10 @@ const EventHistoryDayList: FunctionComponent<ComponentProps> = (
           width: isMobile ? "100%" : "15%",
         }}
       >
-        {OneUptimeDate.getDateAsLocalFormattedString(props.date, true)}
+        {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+          props.date,
+          true,
+        )}
       </div>
       <div
         style={{

package/UI/Components/EventItem/EventItem.tsx

@@ -224,7 +224,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
                             </div>
                             <div>
                               <span className="text-sm leading-8 text-gray-500 whitespace-nowrap">
-                                {OneUptimeDate.getDateAsLocalFormattedString(
+                                {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                                   item.date,
                                 )}
                               </span>
@@ -269,7 +269,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
                               </div>
                               <p className="mt-0.5 text-sm text-gray-500">
                                 posted on{" "}
-                                {OneUptimeDate.getDateAsLocalFormattedString(
+                                {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                                   item.date,
                                 )}
                               </p>

package/UI/Components/Feed/FeedItem.tsx

@@ -117,7 +117,7 @@ const FeedItem: FunctionComponent<ComponentProps> = (
                 )}
                 <div className="mt-0.5 text-sm text-gray-500 w-fit">
                   <Tooltip
-                    text={OneUptimeDate.getDateAsLocalFormattedString(
+                    text={OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                       props.itemDateTime,
                     )}
                   >

package/UI/Components/Filters/FilterViewer.tsx

@@ -208,11 +208,11 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       const shouldOnlyShowDate: boolean = data.filter.type === FieldType.Date;
 
       if (
-        OneUptimeDate.getDateAsLocalFormattedString(
+        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           startAndEndDates.startValue as Date,
           shouldOnlyShowDate,
         ) ===
-        OneUptimeDate.getDateAsLocalFormattedString(
+        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           startAndEndDates.endValue as Date,
           shouldOnlyShowDate,
         )
@@ -222,7 +222,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
             {" "}
             <span className="font-medium">{data.filter.title}</span> at{" "}
             <span className="font-medium">
-              {OneUptimeDate.getDateAsLocalFormattedString(
+              {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                 startAndEndDates.startValue as Date,
                 data.filter.type === FieldType.Date,
               )}
@@ -235,14 +235,14 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
           {" "}
           <span className="font-medium">{data.filter.title}</span> is in between{" "}
           <span className="font-medium">
-            {OneUptimeDate.getDateAsLocalFormattedString(
+            {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
               startAndEndDates.startValue as Date,
               shouldOnlyShowDate,
             )}
           </span>{" "}
           and{" "}
           <span className="font-medium">
-            {OneUptimeDate.getDateAsLocalFormattedString(
+            {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
               startAndEndDates.endValue as Date,
               shouldOnlyShowDate,
             )}

package/UI/Components/Forms/Fields/FormField.tsx

@@ -34,6 +34,7 @@ import React, { ReactElement, useEffect } from "react";
 import Radio, { RadioValue } from "../../Radio/Radio";
 import { BasicRadioButtonOption } from "../../RadioButtons/BasicRadioButtons";
 import HorizontalRule from "../../HorizontalRule/HorizontalRule";
+import MarkdownEditor from "../../Markdown.tsx/MarkdownEditor";
 
 export interface ComponentProps<T extends GenericObject> {
   field: Field<T>;
@@ -473,11 +474,10 @@ const FormField: <T extends GenericObject>(
           )}
 
           {props.field.fieldType === FormFieldSchemaType.Markdown && (
-            <CodeEditor
+            <MarkdownEditor
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               tabIndex={index}
-              type={CodeType.Markdown}
               disableSpellCheck={props.field.disableSpellCheck}
               onChange={async (value: string) => {
                 onChange(value);

package/UI/Components/Forms/Types/Field.ts

@@ -115,6 +115,7 @@ export default interface Field<TEntity> {
   hideOptionalLabel?: boolean | undefined;
 
   // Spell check configuration (primarily for Markdown and text fields)
+  // Default: false (spell check enabled). Set to true to disable spell check.
   disableSpellCheck?: boolean | undefined;
 
   getSummaryElement?: (item: FormValues<TEntity>) => ReactElement | undefined;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -55,7 +55,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       dayNumber,
     );
 
-    let toolTipText: string = `${OneUptimeDate.getDateAsLocalFormattedString(
+    let toolTipText: string = `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
       todaysDay,
       true,
     )}`;
@@ -189,7 +189,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
 
     if (todaysEvents.length === 1) {
       hasEvents = true;
-      toolTipText = `${OneUptimeDate.getDateAsLocalFormattedString(
+      toolTipText = `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
         todaysDay,
         true,
       )} - 100% ${todaysEvents[0]?.label || "Operational"}.`;

package/UI/Components/LogsViewer/LogItem.tsx

@@ -144,7 +144,8 @@ const LogItem: FunctionComponent<ComponentProps> = (
             DATE TIME:
           </div>
           <div className="text-slate-500 courier-prime">
-            {OneUptimeDate.getDateAsFormattedString(props.log.time)} &nbsp;{" "}
+            {OneUptimeDate.getDateAsUserFriendlyFormattedString(props.log.time)}{" "}
+            &nbsp;{" "}
           </div>
         </div>
       )}