@oneuptime/common 14.0.13 → 14.0.14

package/Tests/App/Dashboard/AffectedResourcesSummaryStep.test.tsx

@@ -20,9 +20,10 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
 
 /*
  * The incident and scheduled maintenance wizards end on a review step that
- * lists what each earlier step picked. The "Resources Affected" step uses one
- * picker that writes to every resource relation the page hands it, and the
- * form holds what it picked as bare IDs. Its summary used to be hand-written
+ * lists what each earlier step picked. Their "Resources Affected" step asks
+ * with the affected resources picker - two of them, the monitors apart from
+ * everything else - which writes to every resource
+ * relation the page hands it, and the form holds what it picked as bare IDs. Its summary used to be hand-written
  * per page: it named monitors but only counted every other type ("3 Podman
  * hosts"), so the one place meant to confirm the choice never said which
  * hosts or services were picked - and a type the summary forgot was not even
@@ -33,8 +34,9 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
  * types as the editor; the picker looks the names of bare IDs up, so every
  * picked resource is named.
  *
- * The invariant pinned here: every resource prop the editor picker is given
- * is named in the summary. These tests drive the real pages, with ModelForm
+ * The invariant pinned here: every resource prop an editor picker is given
+ * is named in its summary, and only those - a page with two pickers names
+ * each resource once. These tests drive the real pages, with ModelForm
  * mocked to capture the fields it is handed (as
  * CreateReviewStepSelectionSummary.test.tsx does), read the resource props
  * off the picker element the step renders, and render the step's summary
@@ -160,8 +162,6 @@ const RESOURCE_PROP_NAMES: Array<ResourceProp> = Object.keys(
   RESOURCE_PROPS,
 ) as Array<ResourceProp>;
 
-const NOTHING_SELECTED_PATTERN: RegExp = /No resources affected/;
-
 type KnownResource = {
   modelType: ResourceModelType;
   name: string;
@@ -312,13 +312,21 @@ function nameLookupOf(prop: ResourceProp, ids: Array<string>): Lookup {
   };
 }
 
+type PickerUnderTest = {
+  // What the picker's summary says when nothing is picked.
+  nothingSelectedMessage: string;
+  // Offered by this picker, so the checks below are not vacuous.
+  mustOffer: Array<ResourceProp>;
+  // Never offered by this picker: another picker on the page asks for it.
+  mustNotOffer: Array<ResourceProp>;
+};
+
 type PageUnderTest = {
   name: string;
   component: React.FunctionComponent<PageComponentProps>;
   route: string;
-  nothingSelectedMessage: string;
-  // Offered on this page, so the checks below are not vacuous.
-  mustOffer: Array<ResourceProp>;
+  // The page's pickers, in the order its form lists them.
+  pickers: Array<PickerUnderTest>;
 };
 
 const PAGES: Array<PageUnderTest> = [
@@ -326,19 +334,93 @@ const PAGES: Array<PageUnderTest> = [
     name: "incident create",
     component: IncidentCreate,
     route: "/dashboard/incidents/create",
-    nothingSelectedMessage: "No resources affected by this incident.",
-    mustOffer: ["monitors", "podmanHosts", "databaseServers"],
+    /*
+     * The incident's monitors are picked on their own, and everything else
+     * in a second picker below them: each says what it picked.
+     */
+    pickers: [
+      {
+        nothingSelectedMessage: "No monitors affected by this incident.",
+        mustOffer: ["monitors"],
+        mustNotOffer: ["hosts", "podmanHosts", "databaseServers", "services"],
+      },
+      {
+        nothingSelectedMessage: "No other resources affected by this incident.",
+        mustOffer: ["hosts", "podmanHosts", "databaseServers", "services"],
+        mustNotOffer: ["monitors"],
+      },
+    ],
   },
   {
     name: "scheduled maintenance create",
     component: ScheduledMaintenanceCreate,
     route: "/dashboard/scheduled-maintenance-events/create",
-    nothingSelectedMessage:
-      "No resources affected by this scheduled maintenance event.",
-    mustOffer: ["monitors", "podmanHosts", "databaseServers", "networkSites"],
+    /*
+     * Split as Declare Incident is: the event's monitors in a picker of
+     * their own, everything else - network sites included - below them.
+     */
+    pickers: [
+      {
+        nothingSelectedMessage:
+          "No monitors affected by this scheduled maintenance event.",
+        mustOffer: ["monitors"],
+        mustNotOffer: [
+          "hosts",
+          "podmanHosts",
+          "databaseServers",
+          "networkSites",
+          "services",
+        ],
+      },
+      {
+        nothingSelectedMessage:
+          "No other resources affected by this scheduled maintenance event.",
+        mustOffer: [
+          "hosts",
+          "podmanHosts",
+          "databaseServers",
+          "networkSites",
+          "services",
+        ],
+        mustNotOffer: ["monitors"],
+      },
+    ],
   },
 ];
 
+type PickerCase = {
+  page: PageUnderTest;
+  picker: PickerUnderTest;
+  // Its place among the page's pickers.
+  index: number;
+  label: string;
+};
+
+const PICKER_CASES: Array<PickerCase> = PAGES.flatMap(
+  (page: PageUnderTest): Array<PickerCase> => {
+    return page.pickers.map(
+      (picker: PickerUnderTest, index: number): PickerCase => {
+        return {
+          page: page,
+          picker: picker,
+          index: index,
+          label: `${page.name} picker ${index + 1} of ${page.pickers.length}`,
+        };
+      },
+    );
+  },
+);
+
+// How each picked type reads on its chip, for the props these tests pick.
+const TYPE_LABELS: Partial<Record<ResourceProp, string>> = {
+  monitors: "Monitor",
+  hosts: "Host",
+  dockerHosts: "Docker Host",
+  podmanHosts: "Podman Host",
+  services: "Service",
+  databaseServers: "Database",
+};
+
 type PickerStep = {
   resourceProps: Array<ResourceProp>;
   getSummaryElement: (item: SummaryItem) => React.ReactElement;
@@ -407,12 +489,14 @@ function findPickerSteps(form: CapturedFormProps): Array<PickerStep> {
   return steps;
 }
 
-async function openPickerStep(page: PageUnderTest): Promise<PickerStep> {
-  const steps: Array<PickerStep> = findPickerSteps(await openForm(page));
+async function openPickerStep(pickerCase: PickerCase): Promise<PickerStep> {
+  const steps: Array<PickerStep> = findPickerSteps(
+    await openForm(pickerCase.page),
+  );
 
-  expect(steps).toHaveLength(1);
+  expect(steps).toHaveLength(pickerCase.page.pickers.length);
 
-  return steps[0]!;
+  return steps[pickerCase.index]!;
 }
 
 function renderStepSummary(step: PickerStep, item: SummaryItem): RenderResult {
@@ -504,17 +588,36 @@ describe("the Resources Affected summary step", () => {
   });
 
   describe.each(PAGES)("on the $name page", (page: PageUnderTest) => {
-    test("finds the picker step, so the checks below are not vacuous", async () => {
+    test("finds every picker step, so the checks below are not vacuous", async () => {
       const steps: Array<PickerStep> = findPickerSteps(await openForm(page));
 
-      expect(steps).toHaveLength(1);
-      expect(steps[0]!.resourceProps).toEqual(
-        expect.arrayContaining(page.mustOffer),
-      );
+      expect(steps).toHaveLength(page.pickers.length);
+
+      page.pickers.forEach((picker: PickerUnderTest, index: number) => {
+        expect(steps[index]!.resourceProps).toEqual(
+          expect.arrayContaining(picker.mustOffer),
+        );
+
+        for (const prop of picker.mustNotOffer) {
+          expect(steps[index]!.resourceProps).not.toContain(prop);
+        }
+      });
     });
 
+    test("together, its pickers offer each type once", async () => {
+      const offered: Array<ResourceProp> = findPickerSteps(
+        await openForm(page),
+      ).flatMap((step: PickerStep): Array<ResourceProp> => {
+        return step.resourceProps;
+      });
+
+      expect(new Set(offered).size).toBe(offered.length);
+    });
+  });
+
+  describe.each(PICKER_CASES)("on the $label", (pickerCase: PickerCase) => {
     test("names a selection of every resource type the picker offers", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
       const missing: Array<string> = [];
 
       for (const prop of step.resourceProps) {
@@ -531,7 +634,7 @@ describe("the Resources Affected summary step", () => {
 
         if (
           !named ||
-          NOTHING_SELECTED_PATTERN.test(text) ||
+          text.includes(pickerCase.picker.nothingSelectedMessage) ||
           isLookingUpNames(result.container) ||
           within(result.container).queryByTestId(
             "affected-resources-hidden-note",
@@ -547,7 +650,7 @@ describe("the Resources Affected summary step", () => {
     });
 
     test("looks each type's names up in its own model, for exactly the ids selected", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
       const lookupsByProp: Record<string, Array<Lookup>> = {};
       const expectedByProp: Record<string, Array<Lookup>> = {};
 
@@ -570,16 +673,25 @@ describe("the Resources Affected summary step", () => {
     });
 
     test("names every resource of a mixed selection, each under its type", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
 
       const picks: Array<{ prop: ResourceProp; label: string; count: number }> =
         [
-          { prop: "monitors", label: "Monitor", count: 1 },
-          { prop: "dockerHosts", label: "Docker Host", count: 2 },
-          { prop: "podmanHosts", label: "Podman Host", count: 4 },
-          { prop: "services", label: "Service", count: 1 },
-          { prop: "databaseServers", label: "Database", count: 2 },
-        ];
+          { prop: "monitors" as ResourceProp, count: 1 },
+          { prop: "dockerHosts" as ResourceProp, count: 2 },
+          { prop: "podmanHosts" as ResourceProp, count: 4 },
+          { prop: "services" as ResourceProp, count: 1 },
+          { prop: "databaseServers" as ResourceProp, count: 2 },
+        ]
+          .filter((pick: { prop: ResourceProp }): boolean => {
+            return step.resourceProps.includes(pick.prop);
+          })
+          .map((pick: { prop: ResourceProp; count: number }) => {
+            return { ...pick, label: TYPE_LABELS[pick.prop]! };
+          });
+
+      // Not vacuous: each picker offers at least one of these types.
+      expect(picks.length).toBeGreaterThan(0);
 
       const item: SummaryItem = {};
       const expectedLookups: Array<Lookup> = [];
@@ -603,7 +715,9 @@ describe("the Resources Affected summary step", () => {
         }
       }
 
-      expect(container.textContent).not.toMatch(NOTHING_SELECTED_PATTERN);
+      expect(container.textContent).not.toContain(
+        pickerCase.picker.nothingSelectedMessage,
+      );
 
       // One lookup per type, however many of that type were picked.
       expect(lookupsMade()).toHaveLength(expectedLookups.length);
@@ -611,7 +725,7 @@ describe("the Resources Affected summary step", () => {
     });
 
     test("keeps its nothing-selected sentence and looks nothing up when nothing is selected", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
 
       const allEmpty: SummaryItem = {};
       for (const prop of RESOURCE_PROP_NAMES) {
@@ -625,7 +739,36 @@ describe("the Resources Affected summary step", () => {
 
         await nextTick();
 
-        expect(result.container).toHaveTextContent(page.nothingSelectedMessage);
+        expect(result.container).toHaveTextContent(
+          pickerCase.picker.nothingSelectedMessage,
+        );
+        result.unmount();
+      }
+
+      expect(lookupsMade()).toEqual([]);
+    });
+
+    /*
+     * What another picker on the page picked is that picker's to name: a
+     * summary that named it too would list it twice on the review step.
+     */
+    test("names only its own types, and says nothing was picked when only another picker's were", async () => {
+      const step: PickerStep = await openPickerStep(pickerCase);
+
+      for (const prop of pickerCase.picker.mustNotOffer) {
+        const selected: Array<string> = knownResources(prop, 1);
+        const result: RenderResult = await renderSummary(step, {
+          [prop]: selected,
+        });
+
+        await nextTick();
+
+        expect(result.container).toHaveTextContent(
+          pickerCase.picker.nothingSelectedMessage,
+        );
+        expect(within(result.container).queryByText(nameOf(selected[0]!))).toBe(
+          null,
+        );
         result.unmount();
       }
 
@@ -633,72 +776,64 @@ describe("the Resources Affected summary step", () => {
     });
 
     test("reads a resource the API cannot find as unknown instead of dropping it", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
+      const prop: ResourceProp = pickerCase.picker.mustOffer[0]!;
 
-      const found: string = knownResources("podmanHosts", 1)[0]!;
+      const found: string = knownResources(prop, 1)[0]!;
       // Deleted, or not readable: the lookup does not return it.
       const gone: string = ObjectID.generate().toString();
 
       const { container } = await renderSummary(step, {
-        podmanHosts: [found, gone],
+        [prop]: [found, gone],
       });
 
       expect(within(container).getByText(nameOf(found))).toBeInTheDocument();
       expect(
-        within(container).getByText("Unknown Podman Host"),
+        within(container).getByText(`Unknown ${TYPE_LABELS[prop]!}`),
       ).toBeInTheDocument();
-      expect(container.textContent).not.toMatch(NOTHING_SELECTED_PATTERN);
-      expect(lookupsMade()).toEqual([
-        nameLookupOf("podmanHosts", [found, gone]),
-      ]);
+      expect(container.textContent).not.toContain(
+        pickerCase.picker.nothingSelectedMessage,
+      );
+      expect(lookupsMade()).toEqual([nameLookupOf(prop, [found, gone])]);
     });
 
     test("names resources that arrive with their name without looking them up", async () => {
       /*
-       * The alert prefill and incident templates hand the form resources as
-       * { _id, name } objects rather than bare ids. Those are named as they
-       * come; only a bare id among them is looked up.
+       * The alert prefill, incident templates and the record a page was
+       * opened from hand the form resources as { _id, name } objects rather
+       * than bare ids. Those are named as they come; only a bare id among
+       * them is looked up.
        */
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
+      const prop: ResourceProp = pickerCase.picker.mustOffer[0]!;
 
-      const namedMonitor: { _id: string; name: string } = {
-        _id: ObjectID.generate().toString(),
-        name: "Checkout API monitor",
-      };
-      const namedPodmanHost: { _id: string; name: string } = {
+      const named: { _id: string; name: string } = {
         _id: ObjectID.generate().toString(),
-        name: "podman-edge-01",
+        name: `Named ${prop} that arrived with its name`,
       };
-      const bareId: string = knownResources("podmanHosts", 1)[0]!;
+      const bareId: string = knownResources(prop, 1)[0]!;
 
       const { container } = await renderSummary(step, {
-        monitors: [namedMonitor],
-        podmanHosts: [namedPodmanHost, bareId],
+        [prop]: [named, bareId],
       });
 
-      expect(
-        within(container).getByText(namedMonitor.name),
-      ).toBeInTheDocument();
-      expect(
-        within(container).getByText(namedPodmanHost.name),
-      ).toBeInTheDocument();
+      expect(within(container).getByText(named.name)).toBeInTheDocument();
       expect(within(container).getByText(nameOf(bareId))).toBeInTheDocument();
-      expect(lookupsMade()).toEqual([nameLookupOf("podmanHosts", [bareId])]);
+      expect(lookupsMade()).toEqual([nameLookupOf(prop, [bareId])]);
     });
 
     test("is read-only: no search input and no remove buttons", async () => {
-      const step: PickerStep = await openPickerStep(page);
+      const step: PickerStep = await openPickerStep(pickerCase);
+      const prop: ResourceProp = pickerCase.picker.mustOffer[0]!;
 
-      const monitors: Array<string> = knownResources("monitors", 1);
-      const podmanHosts: Array<string> = knownResources("podmanHosts", 2);
+      const picked: Array<string> = knownResources(prop, 2);
 
       const { container } = await renderSummary(step, {
-        monitors: monitors,
-        podmanHosts: podmanHosts,
+        [prop]: picked,
       });
 
       // Not vacuous: the chips are there.
-      for (const id of [...monitors, ...podmanHosts]) {
+      for (const id of picked) {
         expect(within(container).getByText(nameOf(id))).toBeInTheDocument();
       }
 

package/Tests/App/Dashboard/AlertEpisodeViewFields.test.tsx

@@ -149,6 +149,7 @@ import AlertState from "../../../Models/DatabaseModels/AlertState";
 import Route from "../../../Types/API/Route";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import Color from "../../../Types/Color";
+import OneUptimeDate from "../../../Types/Date";
 import ObjectID from "../../../Types/ObjectID";
 import Permission from "../../../Types/Permission";
 import Navigation from "../../../UI/Utils/Navigation";
@@ -559,6 +560,7 @@ describe("Alert Episode overview: details column", () => {
       },
     );
 
+    // "Created At" is not a row any more: it is on the ID line below.
     expect(rowTitles).toEqual([
       "Episode Number",
       "Current State",
@@ -567,20 +569,44 @@ describe("Alert Episode overview: details column", () => {
       "Grouping Rule",
       "Created By",
       "On-Call Duty Policies",
-      "Created At",
       "Labels",
     ]);
 
     /*
      * The episode's ID used to be the last row, a full-width UUID pill. It
      * is the small line under the rows now: "ID", the start of the ID (all
-     * of it in the text, clipped), and a copy button.
+     * of it in the text, clipped), and a copy button. When the episode was
+     * created, a row of its own until then, sits on the same line after it.
      */
+    const recordLine: HTMLElement = screen.getByTestId("detail-record-line");
     const idLine: HTMLElement = screen.getByTestId("detail-id-line");
+    const created: HTMLElement = screen.getByTestId("detail-created-at");
 
-    expect(grid!.nextElementSibling).toBe(idLine);
-    expect(idLine.parentElement).toHaveAttribute("id", "model-detail-episodes");
-    expect(idLine).toHaveClass("mt-3", "border-t", "border-gray-100", "pt-3");
+    expect(grid!.nextElementSibling).toBe(recordLine);
+    expect(recordLine.parentElement).toHaveAttribute(
+      "id",
+      "model-detail-episodes",
+    );
+    expect(recordLine).toHaveClass(
+      "mt-3",
+      "border-t",
+      "border-gray-100",
+      "pt-3",
+    );
+    expect(Array.from(recordLine.children)).toEqual([idLine, created]);
+    expect(
+      within(created).getByTestId("detail-created-at-label"),
+    ).toHaveTextContent("Created");
+    expect(
+      within(created).getByTestId("detail-created-at-value"),
+    ).toHaveAttribute("datetime", "2026-01-01T00:00:00.000Z");
+    expect(
+      within(created).getByTestId("detail-created-at-value"),
+    ).toHaveTextContent(
+      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        new Date("2026-01-01T00:00:00.000Z"),
+      ),
+    );
     expect(within(idLine).getByTestId("detail-id-label")).toHaveTextContent(
       "ID",
     );
@@ -590,7 +616,7 @@ describe("Alert Episode overview: details column", () => {
     expect(
       within(idLine).getByRole("button", { name: "Copy ID to clipboard" }),
     ).toBeInTheDocument();
-    expect(idLine.querySelector("label")).toBeNull();
+    expect(recordLine.querySelector("label")).toBeNull();
     expectNoCrash();
   });
 
@@ -609,13 +635,17 @@ describe("Alert Episode overview: details column", () => {
   /*
    * The details card sits in a ~300px column. Its old side-by-side header put
    * "Edit Alert Episode" beside the title and squeezed the title and description
-   * into a column a word or two wide.
+   * into a column a word or two wide. Stacked, the title and a short Edit
+   * share the first row - Edit at the right - and the description runs under
+   * them. (Every card has a header now, so this one is found by its title.)
    */
   test("stacks the details card header and keeps a short, gated Edit button", async () => {
     await renderPage({ state: buildState("Created", new Color("#4b5563")) });
 
     const header: HTMLElement = await waitFor(() => {
-      return screen.getByTestId("card-header");
+      return screen
+        .getByText("Episode Details")
+        .closest("[data-testid='card-header']") as HTMLElement;
     });
 
     expect(header).toHaveAttribute("data-header-layout", "stacked");
@@ -625,12 +655,18 @@ describe("Alert Episode overview: details column", () => {
     ).toBeInTheDocument();
 
     const actions: HTMLElement = await waitFor(() => {
-      return screen.getByTestId("card-header-actions");
+      return within(header).getByTestId("card-header-actions");
     });
     const edit: HTMLElement = within(actions).getByRole("button", {
       name: "Edit",
     });
 
+    // Edit is on the title's row, after the title: at the right.
+    expect(within(header).getByTestId("card-header-title-row")).toBe(
+      actions.parentElement,
+    );
+    expect(actions.parentElement?.lastElementChild).toBe(actions);
+
     expect(edit).not.toBeDisabled();
     expect(screen.queryByText("Edit Alert Episode")).toBeNull();
     expect(