@oneuptime/common 14.0.13 → 14.0.14

package/Tests/UI/Components/Detail/DetailRecordTime.test.ts

@@ -0,0 +1,324 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  getRecordTimeFullText,
+  getRecordTimeKind,
+  getRecordTimes,
+  getRecordTimeText,
+  getRecordTimeValue,
+  isRecordTimeField,
+  RECORD_TIME_FIELD_TYPES,
+  RECORD_TIME_KEYS,
+  RECORD_TIME_KINDS,
+  RecordTime,
+  RecordTimeFieldLike,
+  RecordTimeKind,
+} from "../../../../UI/Components/Detail/DetailRecordTime";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import OneUptimeDate from "../../../../Types/Date";
+import Timezone from "../../../../Types/Timezone";
+
+/*
+ * "Can you also show created along the same lines as ID so it doesn't take
+ * space up top. Please do this everywhere."
+ *
+ * Which fields of a details card are the record's creation and update times
+ * - the ones Detail takes out of the grid and puts on the ID line - how
+ * their values are read, and how the line writes them.
+ */
+
+const CREATED: Date = new Date("2026-09-30T13:25:13.000Z");
+const UPDATED: Date = new Date("2026-10-01T08:12:47.000Z");
+
+const createdField: RecordTimeFieldLike = {
+  key: "createdAt",
+  fieldType: FieldType.DateTime,
+};
+
+const updatedField: RecordTimeFieldLike = {
+  key: "updatedAt",
+  fieldType: FieldType.DateTime,
+};
+
+describe("which fields are the record's times", () => {
+  test("they live in the columns every record has", () => {
+    expect(RECORD_TIME_KEYS).toEqual({
+      [RecordTimeKind.Created]: "createdAt",
+      [RecordTimeKind.Updated]: "updatedAt",
+    });
+  });
+
+  test("the line says when it was created, then when it was updated", () => {
+    expect(RECORD_TIME_KINDS).toEqual([
+      RecordTimeKind.Created,
+      RecordTimeKind.Updated,
+    ]);
+  });
+
+  test("a date-time field on createdAt is the record's creation time", () => {
+    expect(getRecordTimeKind(createdField)).toBe(RecordTimeKind.Created);
+    expect(isRecordTimeField(createdField)).toBe(true);
+  });
+
+  test("a date-time field on updatedAt is its last update", () => {
+    expect(getRecordTimeKind(updatedField)).toBe(RecordTimeKind.Updated);
+    expect(isRecordTimeField(updatedField)).toBe(true);
+  });
+
+  test("a date-only field counts too: 'Issued On' on a license is when it was created", () => {
+    expect(RECORD_TIME_FIELD_TYPES).toEqual([
+      FieldType.Date,
+      FieldType.DateTime,
+    ]);
+    expect(
+      getRecordTimeKind({ key: "createdAt", fieldType: FieldType.Date }),
+    ).toBe(RecordTimeKind.Created);
+    expect(
+      getRecordTimeKind({ key: "updatedAt", fieldType: FieldType.Date }),
+    ).toBe(RecordTimeKind.Updated);
+  });
+
+  test("any other type on those columns is the page's own choice, and stays a field", () => {
+    for (const fieldType of Object.values(FieldType)) {
+      if (fieldType === FieldType.Date || fieldType === FieldType.DateTime) {
+        continue;
+      }
+
+      expect({
+        fieldType,
+        kind: getRecordTimeKind({ key: "createdAt", fieldType }),
+      }).toEqual({ fieldType, kind: null });
+      expect({
+        fieldType,
+        kind: getRecordTimeKind({ key: "updatedAt", fieldType }),
+      }).toEqual({ fieldType, kind: null });
+    }
+  });
+
+  test("a field with no type stays a field: Detail would draw it raw, and the page asked for that", () => {
+    expect(getRecordTimeKind({ key: "createdAt" })).toBeNull();
+    expect(
+      getRecordTimeKind({ key: "createdAt", fieldType: undefined }),
+    ).toBeNull();
+  });
+
+  test("a field the page draws itself is the page's", () => {
+    expect(
+      getRecordTimeKind({
+        ...createdField,
+        getElement: (): string => {
+          return "3 days ago";
+        },
+      }),
+    ).toBeNull();
+  });
+
+  test("other dates are the record's facts, not its bookkeeping, and stay fields", () => {
+    for (const key of [
+      "declaredAt",
+      "startsAt",
+      "endsAt",
+      "startedAt",
+      "expiresAt",
+      "deletedAt",
+      "created",
+      "createdat",
+      "CreatedAt",
+      "createdAtDate",
+      "postedAt",
+    ]) {
+      expect({
+        key,
+        kind: getRecordTimeKind({ key, fieldType: FieldType.DateTime }),
+      }).toEqual({
+        key,
+        kind: null,
+      });
+    }
+  });
+
+  test("a related record's creation time belongs to that record", () => {
+    expect(
+      getRecordTimeKind({
+        key: "monitor.createdAt",
+        fieldType: FieldType.DateTime,
+      }),
+    ).toBeNull();
+  });
+
+  test("a field with no key is not one", () => {
+    expect(
+      getRecordTimeKind({ key: null, fieldType: FieldType.DateTime }),
+    ).toBeNull();
+    expect(
+      getRecordTimeKind({ key: undefined, fieldType: FieldType.DateTime }),
+    ).toBeNull();
+  });
+});
+
+describe("reading a time off the item", () => {
+  test("a Date, as a loaded model holds it", () => {
+    expect(getRecordTimeValue(CREATED)?.toISOString()).toBe(
+      CREATED.toISOString(),
+    );
+  });
+
+  test("an ISO string", () => {
+    expect(getRecordTimeValue("2026-09-30T13:25:13.000Z")?.toISOString()).toBe(
+      CREATED.toISOString(),
+    );
+  });
+
+  test("the { _type, value } shape a JSON item carries", () => {
+    expect(
+      getRecordTimeValue({
+        _type: "DateTime",
+        value: "2026-09-30T13:25:13.000Z",
+      })?.toISOString(),
+    ).toBe(CREATED.toISOString());
+  });
+
+  test("the zone-less UTC string the database hands back", () => {
+    expect(getRecordTimeValue("2026-09-30 13:25:13")?.toISOString()).toBe(
+      CREATED.toISOString(),
+    );
+  });
+
+  test("nothing to read draws nothing, never 'Invalid date'", () => {
+    for (const value of [
+      null,
+      undefined,
+      "",
+      {},
+      { value: 42 },
+      { _type: "ObjectID", value: "3f2a8b1c" },
+      [],
+      true,
+      12,
+      new Date("not a date"),
+      "not a date",
+    ]) {
+      expect({ value, read: getRecordTimeValue(value) }).toEqual({
+        value,
+        read: null,
+      });
+    }
+  });
+});
+
+describe("the times a detail declares", () => {
+  const ITEM: Record<string, unknown> = {
+    createdAt: CREATED,
+    updatedAt: UPDATED,
+  };
+
+  const read: (field: RecordTimeFieldLike) => unknown = (
+    field: RecordTimeFieldLike,
+  ): unknown => {
+    return ITEM[String(field.key)];
+  };
+
+  test("come in the line's order, whatever order the page declared them in", () => {
+    const times: Array<RecordTime> = getRecordTimes(
+      [updatedField, { key: "name", fieldType: FieldType.Text }, createdField],
+      read,
+    );
+
+    expect(
+      times.map((time: RecordTime): string => {
+        return `${time.kind} ${time.date.toISOString()}`;
+      }),
+    ).toEqual([
+      `created ${CREATED.toISOString()}`,
+      `updated ${UPDATED.toISOString()}`,
+    ]);
+  });
+
+  test("a time declared twice is said once, from the first field", () => {
+    const times: Array<RecordTime> = getRecordTimes(
+      [createdField, { key: "createdAt", fieldType: FieldType.Date }],
+      read,
+    );
+
+    expect(times).toHaveLength(1);
+    expect(times[0]!.kind).toBe(RecordTimeKind.Created);
+  });
+
+  test("a time the item does not hold is left out", () => {
+    expect(
+      getRecordTimes(
+        [createdField, updatedField],
+        (field: RecordTimeFieldLike) => {
+          return field.key === "createdAt" ? CREATED : undefined;
+        },
+      ).map((time: RecordTime): RecordTimeKind => {
+        return time.kind;
+      }),
+    ).toEqual([RecordTimeKind.Created]);
+  });
+
+  test("no time fields, no times", () => {
+    expect(
+      getRecordTimes(
+        [
+          { key: "name", fieldType: FieldType.Text },
+          { key: "_id", fieldType: FieldType.ObjectID },
+        ],
+        read,
+      ),
+    ).toEqual([]);
+  });
+});
+
+describe("how the line writes a time", () => {
+  let previousTimezone: Timezone | null = null;
+
+  beforeEach(() => {
+    previousTimezone = OneUptimeDate.getUserTimezone();
+    OneUptimeDate.setUserTimezone(Timezone.EuropeLondon);
+    jest
+      .spyOn(OneUptimeDate, "getUserPrefers12HourFormat")
+      .mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    OneUptimeDate.setUserTimezone(previousTimezone);
+    jest.restoreAllMocks();
+  });
+
+  test("as the row it replaces did: the date and time in the reader's zone", () => {
+    expect(getRecordTimeText(CREATED)).toBe("Sep 30 2026, 14:25 BST");
+    expect(getRecordTimeText(CREATED)).toBe(
+      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(CREATED),
+    );
+  });
+
+  test("hovering gives it to the second", () => {
+    expect(getRecordTimeFullText(CREATED)).toBe("Sep 30 2026, 14:25:13 BST");
+  });
+
+  test("in the time zone the reader picked, the date included", () => {
+    OneUptimeDate.setUserTimezone(Timezone.AmericaNew_York);
+    expect(getRecordTimeText(CREATED)).toBe("Sep 30 2026, 09:25 EDT");
+
+    OneUptimeDate.setUserTimezone(Timezone.AsiaKolkata);
+    expect(getRecordTimeText(new Date("2026-09-30T23:45:00.000Z"))).toBe(
+      "Oct 01 2026, 05:15 IST",
+    );
+  });
+
+  test("on the reader's clock", () => {
+    jest
+      .spyOn(OneUptimeDate, "getUserPrefers12HourFormat")
+      .mockReturnValue(true);
+
+    expect(getRecordTimeText(CREATED)).toBe("Sep 30 2026, 02:25 PM BST");
+    expect(getRecordTimeFullText(CREATED)).toBe("Sep 30 2026, 02:25:13 PM BST");
+  });
+});

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

@@ -97,7 +97,11 @@ const PROBE_ID: ObjectID = new ObjectID("11111111-1111-4111-8111-111111111111");
 interface DetailItem {
   title?: string | undefined;
   owner?: string | undefined;
-  createdAt?: Date | undefined;
+  /*
+   * A date that is one of the record's facts. The record's own createdAt
+   * would leave the grid for the line under it (DetailCreatedOnIdLine).
+   */
+  declaredAt?: Date | undefined;
   apiKey?: string | undefined;
   notes?: string | undefined;
 }
@@ -105,7 +109,7 @@ interface DetailItem {
 const ITEM: DetailItem = {
   title: "Checkout latency",
   owner: "Payments team",
-  createdAt: new Date("2026-09-14T18:01:00.000Z"),
+  declaredAt: new Date("2026-09-14T18:01:00.000Z"),
   apiKey: "abc-123",
 };
 
@@ -366,7 +370,7 @@ describe("DetailStyle.Compact values", () => {
       style: DetailStyle.Compact,
       fields: [
         {
-          key: "createdAt",
+          key: "declaredAt",
           title: "Declared at",
           fieldType: FieldType.DateTime,
         },

package/Tests/UI/Components/Dropdown/DropdownChange.test.ts

@@ -0,0 +1,163 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  DropdownOption,
+  DropdownOptionGroup,
+} from "../../../../UI/Components/Dropdown/Dropdown";
+import {
+  EMPTY_DROPDOWN_CHANGE,
+  flattenDropdownOptions,
+  getDropdownChange,
+  getDropdownOptionsForValue,
+  getPickedLabel,
+} from "../../../../UI/Components/Dropdown/DropdownChange";
+import ObjectID from "../../../../Types/ObjectID";
+
+/*
+ * What a pick in a dropdown changed, as the list showed it (DropdownChange).
+ * A fixed list works it out from its own options with these helpers; a list
+ * of records reports its own (EntityDropdown). A form field's onChange gets
+ * it, so a field can fill in a name after what was picked.
+ */
+
+const HIGH: DropdownOption = { value: "high", label: "High" };
+const LOW: DropdownOption = { value: "low", label: "Low" };
+const ONE: DropdownOption = { value: 1, label: "One" };
+const YES: DropdownOption = { value: true, label: "Yes" };
+
+const MONITOR_ID: string = "0198c8ec-2a1d-7f0c-9e75-384194166001";
+const MONITOR: DropdownOption = { value: MONITOR_ID, label: "Checkout API" };
+
+const GROUPED: Array<DropdownOption | DropdownOptionGroup> = [
+  { label: "Severities", options: [HIGH, LOW] },
+  ONE,
+  { label: "Answers", options: [YES] },
+];
+
+describe("flattenDropdownOptions", () => {
+  test("opens up groups, in the order the list shows them", () => {
+    expect(flattenDropdownOptions(GROUPED)).toEqual([HIGH, LOW, ONE, YES]);
+  });
+
+  test("is empty for a list that has no options yet", () => {
+    expect(flattenDropdownOptions(undefined)).toEqual([]);
+    expect(flattenDropdownOptions([])).toEqual([]);
+  });
+});
+
+describe("getDropdownOptionsForValue", () => {
+  test("finds a value among the options, inside groups too", () => {
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: "low" }),
+    ).toEqual([LOW]);
+  });
+
+  test("finds numbers and booleans as the form keeps them", () => {
+    expect(getDropdownOptionsForValue({ options: GROUPED, value: 1 })).toEqual([
+      ONE,
+    ]);
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: true }),
+    ).toEqual([YES]);
+  });
+
+  test("finds a record's id whether it is held as a string or an ObjectID", () => {
+    expect(
+      getDropdownOptionsForValue({ options: [MONITOR], value: MONITOR_ID }),
+    ).toEqual([MONITOR]);
+    expect(
+      getDropdownOptionsForValue({
+        options: [MONITOR],
+        value: new ObjectID(MONITOR_ID),
+      }),
+    ).toEqual([MONITOR]);
+  });
+
+  test("takes a value that is an option already as it is", () => {
+    const picked: DropdownOption = { value: "elsewhere", label: "Elsewhere" };
+
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: picked }),
+    ).toEqual([picked]);
+  });
+
+  test("follows a multi-select's order", () => {
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: ["low", "high"] }),
+    ).toEqual([LOW, HIGH]);
+  });
+
+  test("leaves out a value no option has, rather than inventing a label", () => {
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: ["low", "gone"] }),
+    ).toEqual([LOW]);
+    expect(
+      getDropdownOptionsForValue({ options: GROUPED, value: "gone" }),
+    ).toEqual([]);
+  });
+
+  test("is empty for nothing picked", () => {
+    for (const value of [undefined, null, "", []]) {
+      expect(getDropdownOptionsForValue({ options: GROUPED, value })).toEqual(
+        [],
+      );
+    }
+  });
+});
+
+describe("getDropdownChange", () => {
+  test("says what is picked now and what was picked before", () => {
+    expect(
+      getDropdownChange({
+        options: GROUPED,
+        value: "low",
+        previousValue: "high",
+      }),
+    ).toEqual({ selectedOptions: [LOW], previousOptions: [HIGH] });
+  });
+
+  test("says a cleared pick: nothing now, and what was there", () => {
+    expect(
+      getDropdownChange({
+        options: GROUPED,
+        value: null,
+        previousValue: "high",
+      }),
+    ).toEqual({ selectedOptions: [], previousOptions: [HIGH] });
+  });
+
+  test("says a first pick: nothing before", () => {
+    expect(
+      getDropdownChange({
+        options: GROUPED,
+        value: ["high", "low"],
+        previousValue: undefined,
+      }),
+    ).toEqual({ selectedOptions: [HIGH, LOW], previousOptions: [] });
+  });
+
+  test("starts from an empty change", () => {
+    expect(EMPTY_DROPDOWN_CHANGE).toEqual({
+      selectedOptions: [],
+      previousOptions: [],
+    });
+  });
+});
+
+describe("getPickedLabel", () => {
+  test("is the label of the one option picked", () => {
+    expect(getPickedLabel([MONITOR])).toBe("Checkout API");
+  });
+
+  test("is trimmed", () => {
+    expect(getPickedLabel([{ value: "x", label: "  Checkout API " }])).toBe(
+      "Checkout API",
+    );
+  });
+
+  test("is nothing for no pick, more than one, or a blank label", () => {
+    expect(getPickedLabel(undefined)).toBeNull();
+    expect(getPickedLabel([])).toBeNull();
+    expect(getPickedLabel([HIGH, LOW])).toBeNull();
+    expect(getPickedLabel([{ value: "x", label: "   " }])).toBeNull();
+  });
+});

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

@@ -124,7 +124,109 @@ describe("EntityDropdown", () => {
     fireEvent.click(screen.getByRole("option", { name: "Members" }));
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("members");
+    expect(onChange).toHaveBeenCalledWith("members", {
+      selectedOptions: [{ value: "members", label: "Members" }],
+      previousOptions: [],
+    });
     expect(screen.queryByTestId("entity-dropdown-menu")).toBeNull();
   });
+
+  /*
+   * What the pick was, as the list showed it: a form fills in a name after
+   * the record picked (a status page resource's display name follows its
+   * monitor) without asking the server for the record again, and can tell
+   * the name of what was picked before from one somebody typed.
+   */
+  describe("tells onChange what the pick changed", () => {
+    test("a new pick, and the one it replaced", () => {
+      const onChange: MockFunction = getJestMockFunction();
+      render(
+        <EntityDropdown
+          ariaLabel="Team"
+          onChange={onChange}
+          options={options}
+          value="members"
+        />,
+      );
+
+      // A single-select showing its value opens from the value.
+      fireEvent.click(screen.getByRole("button", { name: /Members/ }));
+      fireEvent.click(screen.getByRole("option", { name: "Admins" }));
+
+      expect(onChange).toHaveBeenCalledWith("admins", {
+        selectedOptions: [{ value: "admins", label: "Admins" }],
+        previousOptions: [{ value: "members", label: "Members" }],
+      });
+    });
+
+    test("a cleared pick: nothing picked now, and what was picked before", () => {
+      const onChange: MockFunction = getJestMockFunction();
+      render(
+        <EntityDropdown
+          ariaLabel="Team"
+          onChange={onChange}
+          options={options}
+          value="admins"
+        />,
+      );
+
+      fireEvent.click(
+        screen.getAllByRole("button", { name: "Clear selection" })[0]!,
+      );
+
+      expect(onChange).toHaveBeenCalledWith(null, {
+        selectedOptions: [],
+        previousOptions: [{ value: "admins", label: "Admins" }],
+      });
+    });
+
+    test("a removed chip of a multi-select: the rest, and all of them before", () => {
+      const onChange: MockFunction = getJestMockFunction();
+      render(
+        <EntityDropdown
+          ariaLabel="Team"
+          isMultiSelect={true}
+          onChange={onChange}
+          options={options}
+          value={["members", "admins"]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Remove Members" }));
+
+      expect(onChange).toHaveBeenCalledWith(["admins"], {
+        selectedOptions: [{ value: "admins", label: "Admins" }],
+        previousOptions: [
+          { value: "members", label: "Members" },
+          { value: "admins", label: "Admins" },
+        ],
+      });
+    });
+
+    /*
+     * An id the list has no label for yet is no name: it is left out rather
+     * than handed over as its own label.
+     */
+    test("never hands over a raw id as a label", () => {
+      const onChange: MockFunction = getJestMockFunction();
+      render(
+        <EntityDropdown
+          ariaLabel="Team"
+          onChange={onChange}
+          options={options}
+          value="an-id-the-list-does-not-know"
+        />,
+      );
+
+      fireEvent.click(
+        screen.getByRole("button", { name: /an-id-the-list-does-not-know/ }),
+      );
+      fireEvent.click(screen.getByRole("option", { name: "Members" }));
+
+      expect(onChange).toHaveBeenCalledWith("members", {
+        selectedOptions: [{ value: "members", label: "Members" }],
+        previousOptions: [],
+      });
+    });
+  });
 });