@oneuptime/common 14.0.11 → 14.0.12

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

@@ -0,0 +1,196 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * "This monitor is disabled", on a monitor that is archived.
+ *
+ * An archived monitor is not checked either, but the archived banner at the
+ * top of its pages already says so and offers to unarchive it. Two banners
+ * for one fact would make the reader work out which one matters, so the
+ * disabled banner stays quiet while the monitor is archived - and speaks again
+ * as soon as it is unarchived, if the monitor is also disabled. It follows an
+ * archive or unarchive made elsewhere on the page without a reload.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>): unknown => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+import { announceArchiveStateChange } from "../../../../App/FeatureSet/Dashboard/src/Components/Archive/ArchiveStateEvents";
+import DisabledWarning, {
+  getDisabledMessage,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/DisabledWarning";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import ObjectID from "../../../Types/ObjectID";
+
+const MONITOR_ID: ObjectID = new ObjectID(
+  "5a4b3c2d-1e0f-4a9b-8c7d-6e5f4a3b2c1d",
+);
+const OTHER_MONITOR_ID: ObjectID = new ObjectID(
+  "9e8d7c6b-5a4f-4e3d-9c2b-1a0f9e8d7c6b",
+);
+
+const DISABLED_MESSAGE: string =
+  "We are not monitoring this monitor since it is disabled. To enable active monitoring, please go to Settings.";
+
+function monitorWith(values: Partial<Monitor>): Monitor {
+  const monitor: Monitor = new Monitor();
+  monitor.monitorType = MonitorType.API;
+  Object.assign(monitor, values);
+  return monitor;
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    for (let i: number = 0; i < 10; i++) {
+      await Promise.resolve();
+    }
+  });
+}
+
+function bannerShown(): boolean {
+  return screen.queryByText("This monitor is disabled") !== null;
+}
+
+beforeEach(() => {
+  getItemMock.mockReset();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("getDisabledMessage for an archived monitor", () => {
+  test("says nothing, even when the monitor is also disabled", () => {
+    expect(
+      getDisabledMessage(
+        monitorWith({ isArchived: true, disableActiveMonitoring: true }),
+      ),
+    ).toBe("");
+  });
+
+  test("says nothing, even when an incident or maintenance also paused it", () => {
+    expect(
+      getDisabledMessage(
+        monitorWith({
+          isArchived: true,
+          disableActiveMonitoringBecauseOfManualIncident: true,
+          disableActiveMonitoringBecauseOfScheduledMaintenanceEvent: true,
+        }),
+      ),
+    ).toBe("");
+  });
+
+  test("a disabled monitor that is not archived is still reported", () => {
+    expect(
+      getDisabledMessage(
+        monitorWith({ isArchived: false, disableActiveMonitoring: true }),
+      ),
+    ).toBe(DISABLED_MESSAGE);
+  });
+});
+
+describe("the disabled banner on an archived monitor's pages", () => {
+  test("is not shown, and the monitor is read with its archive flag", async () => {
+    getItemMock.mockResolvedValue(
+      monitorWith({ isArchived: true, disableActiveMonitoring: true }) as never,
+    );
+
+    render(<DisabledWarning monitorId={MONITOR_ID} />);
+    await flush();
+
+    expect(bannerShown()).toBe(false);
+    const select: Record<string, unknown> = (
+      getItemMock.mock.calls[0]![0] as { select: Record<string, unknown> }
+    ).select;
+    expect(select["isArchived"]).toBe(true);
+  });
+
+  test("goes away when the monitor is archived on the page, and comes back when it is unarchived", async () => {
+    getItemMock.mockResolvedValue(
+      monitorWith({
+        isArchived: false,
+        disableActiveMonitoring: true,
+      }) as never,
+    );
+
+    render(<DisabledWarning monitorId={MONITOR_ID} />);
+    await flush();
+    expect(bannerShown()).toBe(true);
+
+    getItemMock.mockResolvedValue(
+      monitorWith({ isArchived: true, disableActiveMonitoring: true }) as never,
+    );
+    act(() => {
+      announceArchiveStateChange({
+        modelType: Monitor,
+        modelId: MONITOR_ID,
+        isArchived: true,
+      });
+    });
+    await flush();
+    expect(bannerShown()).toBe(false);
+
+    getItemMock.mockResolvedValue(
+      monitorWith({
+        isArchived: false,
+        disableActiveMonitoring: true,
+      }) as never,
+    );
+    act(() => {
+      announceArchiveStateChange({
+        modelType: Monitor,
+        modelId: MONITOR_ID,
+        isArchived: false,
+      });
+    });
+    await flush();
+    expect(bannerShown()).toBe(true);
+    expect(screen.getByText(DISABLED_MESSAGE)).toBeInTheDocument();
+  });
+
+  test("does not re-read for another monitor's archive", async () => {
+    getItemMock.mockResolvedValue(
+      monitorWith({
+        isArchived: false,
+        disableActiveMonitoring: true,
+      }) as never,
+    );
+
+    render(<DisabledWarning monitorId={MONITOR_ID} />);
+    await flush();
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      announceArchiveStateChange({
+        modelType: Monitor,
+        modelId: OTHER_MONITOR_ID,
+        isArchived: true,
+      });
+    });
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+    expect(bannerShown()).toBe(true);
+  });
+});

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

@@ -514,9 +514,6 @@ describe("Editing a discovery scan after it was created", () => {
 
     expect(editFields()).toHaveLength(wizardFields.length);
 
-    let headed: number = 0;
-    const titledStepIds: Set<string> = new Set<string>();
-
     editFields().forEach((field: CapturedFormField, index: number) => {
       const wizardField: CapturedFormField = wizardFields[
         index
@@ -539,30 +536,23 @@ describe("Editing a discovery scan after it was created", () => {
         hasShowIf: Boolean(wizardField.showIf),
       });
 
-      let expectedSectionTitle: string | undefined = wizardField.sectionTitle;
-
       /*
-       * The edit layout adds each wizard step's title to the first field in
-       * that step. Field-level subsection titles are part of the shared field
-       * definition, though, and must survive unchanged in both layouts. The
-       * scan-method toggle's "What to check" heading is one such subsection.
+       * Field-level subsection titles are part of the shared field
+       * definition and read the same in both forms. The scan-method toggle's
+       * "What to check" heading is one such subsection.
        */
-      if (wizardField.stepId && !titledStepIds.has(wizardField.stepId)) {
-        expectedSectionTitle = formSteps.find(
-          (step: { id: string; title: string }): boolean => {
-            return step.id === wizardField.stepId;
-          },
-        )?.title;
-
-        expect(expectedSectionTitle).toBeDefined();
-        titledStepIds.add(wizardField.stepId);
-        headed++;
-      }
-
-      expect(field.sectionTitle).toBe(expectedSectionTitle);
+      expect(field.sectionTitle).toBe(wizardField.sectionTitle);
     });
 
-    expect(headed).toBe(formSteps.length);
+    // Every field is on one of the steps both forms walk.
+    for (const field of editFields()) {
+      expect(
+        formSteps.some((step: { id: string; title: string }): boolean => {
+          return step.id === field.stepId;
+        }),
+      ).toBe(true);
+    }
+
     expect(
       wizardFields.find((field: CapturedFormField): boolean => {
         return fieldKeyOf(field) === "isSnmpEnabled";
@@ -602,17 +592,32 @@ describe("Editing a discovery scan after it was created", () => {
   });
 
   /*
-   * Not a wizard. A stepped form has no Back button — the only way backwards
-   * is the step rail, which BasicForm hides below the `lg` breakpoint — and
-   * three "Next" clicks to reach the toggle you came to flip is the wrong
-   * shape for a repair. The wizard's step titles survive as section headings
-   * so the grouping is not lost with the steps.
+   * The edit dialog walks the create wizard's own steps - Scan Target, SNMP
+   * Credentials, Schedule - from the one list both forms are handed, so a
+   * setting can never sit on a step one of them lacks. Long forms are
+   * stepped, edit forms included; being an Update form, the dialog saves
+   * from any step and opens any step from its step list
+   * (SteppedEditFormSave.test.tsx drives that), so flipping the schedule is
+   * not three Next clicks away, and there is still no Back button.
    */
-  test("lays the settings out on one page, under the wizard's own headings", async () => {
+  test("walks the create wizard's own steps", async () => {
     await openEditDialog();
 
-    expect(capturedModalProps?.formProps?.steps).toBeUndefined();
+    expect(capturedModalProps?.formProps?.steps).toBeDefined();
+    expect(capturedModalProps?.formProps?.steps).toBe(
+      capturedTableProps?.formSteps,
+    );
+    expect(
+      (capturedModalProps?.formProps?.steps || []).map(
+        (step: { id: string; title: string }): string => {
+          return step.title;
+        },
+      ),
+    ).toEqual(["Scan Target", "SNMP Credentials", "Schedule"]);
+    expect(capturedModalProps?.formProps?.formType).toBe(FormType.Update);
 
+    const wizardFields: Array<CapturedFormField> =
+      capturedTableProps?.formFields || [];
     const headings: Array<string> = editFields()
       .map((field: CapturedFormField): string | undefined => {
         return field.sectionTitle;
@@ -621,60 +626,25 @@ describe("Editing a discovery scan after it was created", () => {
         return Boolean(title);
       }) as Array<string>;
 
-    /*
-     * NOT simply the step titles in order any more, which is what this
-     * assertion used to be. The scan-method toggle carries a subsection
-     * heading of its own ("What to check") in the middle of the Scan Target
-     * group, so the edit dialog's headings are the step titles INTERLEAVED
-     * with the field-level ones — and an assertion that only knew about steps
-     * would have to be relaxed to accommodate that, which would stop it
-     * noticing a step heading going missing.
-     *
-     * Rebuilt from the wizard's own fields instead: first field of a step
-     * contributes that step's title (the edit layout overwrites its
-     * sectionTitle with it), every other field contributes whatever
-     * sectionTitle it declares. That keeps the assertion exact while staying
-     * true for both kinds of heading.
-     */
-    const wizardFields: Array<CapturedFormField> =
-      capturedTableProps?.formFields || [];
-    const formSteps: Array<{ id: string; title: string }> =
-      capturedTableProps?.formSteps || [];
-    const titledStepIds: Set<string> = new Set<string>();
-    const expectedHeadings: Array<string> = [];
-
-    wizardFields.forEach((field: CapturedFormField): void => {
-      if (field.stepId && !titledStepIds.has(field.stepId)) {
-        const stepTitle: string | undefined = formSteps.find(
-          (step: { id: string; title: string }): boolean => {
-            return step.id === field.stepId;
-          },
-        )?.title;
-
-        expect(stepTitle).toBeDefined();
-        expectedHeadings.push(stepTitle as string);
-        titledStepIds.add(field.stepId);
-        return;
-      }
-
-      if (field.sectionTitle) {
-        expectedHeadings.push(field.sectionTitle);
-      }
-    });
-
-    expect(headings).toEqual(expectedHeadings);
+    // The steps name the groups; no step title is repeated as a heading.
+    expect(headings).toEqual(
+      wizardFields
+        .map((field: CapturedFormField): string | undefined => {
+          return field.sectionTitle;
+        })
+        .filter((title: string | undefined): boolean => {
+          return Boolean(title);
+        }),
+    );
+    expect(headings).not.toContain("Scan Target");
+    expect(headings).not.toContain("SNMP Credentials");
+    expect(headings).not.toContain("Schedule");
     expect(headings).toContain("What to check");
 
-    /*
-     * A heading is carried by the FIRST field of its group, so which field
-     * carries it is not decoration — it is where the group begins. The SNMP
-     * group used to begin at `snmpVersion`, the first of nine flat fields;
-     * it now begins at `snmpConfigs`, which is the only field on that step.
-     * Pinned because the heading silently moves to whatever field happens to
-     * come first, and a group that begins in the wrong place puts the
-     * credentials under the schedule's heading with no other symptom.
-     */
-    expect(editFieldNamed("snmpConfigs").sectionTitle).toBe("SNMP Credentials");
+    // The credentials are on their own step, and the schedule on its.
+    expect(editFieldNamed("snmpConfigs").stepId).toBe("snmp");
+    expect(editFieldNamed("isRecurring").stepId).toBe("schedule");
+    expect(editFieldNamed("cidr").stepId).toBe("scan-target");
 
     /*
      * And the toggle keeps its own heading rather than being promoted to a

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

@@ -112,6 +112,7 @@ import EnterpriseFeatureUpgrade, {
 import AuditLogsEnterpriseUpgrade, {
   isAuditLogsEnterpriseEligible,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/AuditLogs/AuditLogsEnterpriseUpgrade";
+import AdminEnterpriseFeatureUpgrade from "../../../../App/FeatureSet/AdminDashboard/src/Components/EnterpriseEdition/EnterpriseFeatureUpgrade";
 import {
   AUDIT_LOGS_REQUIRED_PLAN,
   IDENTITY_REQUIRED_PLAN,
@@ -130,6 +131,9 @@ import StatusPageSSO from "../../../Models/DatabaseModels/StatusPageSso";
 import { PlanType } from "../../../Types/Billing/SubscriptionPlan";
 import IconProp from "../../../Types/Icon/IconProp";
 
+// A filled button - what a primary button looks like, whatever its colour.
+const FILLED_BUTTON_CLASS: RegExp = /\bbg-(indigo|red|green|yellow)-600\b/;
+
 type Deployment = "cloud" | "self-hosted-enterprise" | "self-hosted-community";
 
 const pinDeployment: (deployment: Deployment) => void = (
@@ -604,6 +608,35 @@ describe("EnterpriseFeatureUpgrade", () => {
     );
   });
 
+  /*
+   * The call to action appears twice, in the card's header and under the
+   * pitch. Both used to be filled indigo buttons: one card asking for the same
+   * thing twice, as two primary buttons. The one under the pitch - where the
+   * reasons to press it are - is the card's primary button; the header's copy
+   * is plain.
+   */
+  test("draws one primary call to action, the one under the pitch", () => {
+    pinDeployment("cloud");
+
+    renderCard();
+
+    const ctas: Array<HTMLElement> = screen
+      .getAllByText("Upgrade to Scale")
+      .map((label: HTMLElement): HTMLElement => {
+        return label.closest("button") as HTMLElement;
+      });
+    const filled: Array<HTMLElement> = screen
+      .getAllByRole("button")
+      .filter((button: HTMLElement) => {
+        return FILLED_BUTTON_CLASS.test(button.className);
+      });
+
+    expect(ctas).toHaveLength(2);
+    expect(filled).toHaveLength(1);
+    expect(filled[0]).toBe(ctas[1]);
+    expect(ctas[0]).toHaveClass("bg-white");
+  });
+
   test("an explicit Edition reason wins over billing", () => {
     pinDeployment("cloud");
 
@@ -679,3 +712,37 @@ describe("AuditLogsEnterpriseUpgrade", () => {
     expect(screen.queryByText("Upgrade to Enterprise")).not.toBeInTheDocument();
   });
 });
+
+describe("the admin dashboard's EnterpriseFeatureUpgrade", () => {
+  test("draws one primary call to action, the one under the pitch", () => {
+    render(
+      <AdminEnterpriseFeatureUpgrade
+        title="Single Sign On (SSO)"
+        description="Configure SAML SSO for every project."
+        featureName="Global SSO"
+        benefits={[
+          {
+            icon: IconProp.Lock,
+            title: "Centralized auth",
+            subtitle: "Revoke access from one place.",
+          },
+        ]}
+      />,
+    );
+
+    const ctas: Array<HTMLElement> = screen
+      .getAllByText("Learn about Enterprise Edition")
+      .map((label: HTMLElement): HTMLElement => {
+        return label.closest("button") as HTMLElement;
+      });
+    const filled: Array<HTMLElement> = screen
+      .getAllByRole("button")
+      .filter((button: HTMLElement) => {
+        return FILLED_BUTTON_CLASS.test(button.className);
+      });
+
+    expect(ctas).toHaveLength(2);
+    expect(filled).toEqual([ctas[1]]);
+    expect(ctas[0]).toHaveClass("bg-white");
+  });
+});

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

@@ -2745,3 +2745,50 @@ describe("the quiet default", () => {
     expect(idle.state).toBe("idle");
   });
 });
+
+/*
+ * A policy with no rules yet shows "Add Escalation Rule" twice: in the card's
+ * header and again under "No escalation rules yet", where the empty list leaves
+ * the eye. Both used to be filled indigo buttons - two primary buttons for one
+ * action. The header's is the page's primary button; the empty state repeats
+ * it drawn plain, the way an empty table repeats its Create button.
+ */
+describe("an escalation policy with no rules yet", () => {
+  test("offers Add Escalation Rule twice, and only the header's is the primary button", async () => {
+    mockPolicy({ users: [] });
+    getListMock.mockImplementation((): Promise<any> => {
+      return Promise.resolve({ data: [], count: 0, skip: 0, limit: 50 });
+    });
+
+    render(
+      <EscalationRules onCallDutyPolicyId={POLICY_ID} projectId={PROJECT_ID} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No escalation rules yet")).toBeInTheDocument();
+    });
+
+    const addButtons: Array<HTMLElement> = screen.getAllByRole("button", {
+      name: "Add Escalation Rule",
+    });
+
+    expect(addButtons).toHaveLength(2);
+
+    const filled: Array<HTMLElement> = addButtons.filter(
+      (button: HTMLElement) => {
+        return button.classList.contains("bg-indigo-600");
+      },
+    );
+    const emptyStateButton: HTMLElement = addButtons.find(
+      (button: HTMLElement) => {
+        return Boolean(button.closest("#no-escalation-rules"));
+      },
+    )!;
+
+    expect(filled).toHaveLength(1);
+    expect(emptyStateButton).toBeDefined();
+    expect(emptyStateButton).toHaveClass("bg-white");
+    expect(emptyStateButton).not.toHaveClass("bg-indigo-600");
+    expect(filled[0]).not.toBe(emptyStateButton);
+  });
+});

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

@@ -706,7 +706,8 @@ describe("EventStatusPanel header layouts", () => {
       actions: [],
     });
 
-    expect(screen.getByTestId("pill")).toHaveStyle({
+    // The pill is a tint of its colour; its dot is the colour itself.
+    expect(screen.getByTestId("pill-dot")).toHaveStyle({
       backgroundColor: "#000000",
     });
   });

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

@@ -677,15 +677,32 @@ describe("the requests behind the tiles", () => {
     );
   });
 
-  test("the monitor total counts every monitor in the project, whatever its state", async () => {
+  test("the monitor total counts every monitor that is not archived, whatever its state", async () => {
     await renderStats();
 
+    /*
+     * Archived monitors are gone from the Monitors list the tile opens, so a
+     * project whose monitors are all archived reads as "no monitors yet",
+     * the same as the SLO tile does for archived SLOs.
+     */
     const [request]: Array<CountRequest> = requestsOf("totalMonitors");
     expect(requestsOf("totalMonitors")).toHaveLength(1);
-    expect(Object.keys(request!.query)).toEqual(["projectId"]);
+    expect(Object.keys(request!.query).sort()).toEqual([
+      "isArchived",
+      "projectId",
+    ]);
+    expect(request!.query["isArchived"]).toBe(false);
     expect(String(request!.query["projectId"])).toBe(PROJECT_ID);
   });
 
+  test("the not-operational count leaves archived monitors out: their status is frozen", async () => {
+    await renderStats();
+
+    const [request]: Array<CountRequest> = requestsOf("notOperationalMonitors");
+    expect(requestsOf("notOperationalMonitors")).toHaveLength(1);
+    expect(request!.query["isArchived"]).toBe(false);
+  });
+
   test("the SLO total is every SLO that is not archived, enabled or not", async () => {
     await renderStats();
 

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

@@ -94,7 +94,7 @@ afterEach(() => {
 });
 
 describe("the incident view side menu", () => {
-  test("keeps its sections exactly as they were", async () => {
+  test("keeps its sections, with Developer just before Advanced", async () => {
     goTo(pageRoute(PageMap.INCIDENT_VIEW_ALERTS));
     await renderMenu(<IncidentSideMenu modelId={MODEL_ID} />);
 
@@ -104,6 +104,7 @@ describe("the incident view side menu", () => {
       "Team",
       "Notifications",
       "Notes",
+      "Developer",
       "Advanced",
     ]);
   });
@@ -178,6 +179,7 @@ describe("the alert view side menu", () => {
       "On Call",
       "Logs",
       "Alert Notes",
+      "Developer",
       "Advanced",
     ]);
   });

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

@@ -332,6 +332,21 @@ const pillFor: PillForFunction = (title: string): HTMLElement => {
   return pill;
 };
 
+// The pill is a tint of its colour; its dot is the colour itself.
+type PillColorFunction = (pill: HTMLElement) => string;
+
+const pillColor: PillColorFunction = (pill: HTMLElement): string => {
+  const dot: HTMLElement | null = pill.querySelector<HTMLElement>(
+    '[data-testid="pill-dot"]',
+  );
+
+  if (!dot) {
+    throw new Error("The pill rendered no dot");
+  }
+
+  return dot.style.backgroundColor;
+};
+
 // A stat bar cell: label span -> label row -> cell; the value is the 2nd child.
 type StatValueFunction = (label: string) => string;
 
@@ -456,7 +471,7 @@ describe("Incident Episode detail page: severity (issue #3374)", () => {
     const pill: HTMLElement = pillFor("Episode Severity");
 
     expect(pill.textContent).toContain("Critical");
-    expect(pill.style.backgroundColor).toEqual("rgb(239, 68, 68)");
+    expect(pillColor(pill)).toEqual("rgb(239, 68, 68)");
     expectNoCrash();
   });
 
@@ -480,7 +495,7 @@ describe("Incident Episode detail page: severity (issue #3374)", () => {
 
     expect(pill.textContent).toContain("Critical");
     // Black is the declared fallback in the page.
-    expect(pill.style.backgroundColor).toEqual("rgb(0, 0, 0)");
+    expect(pillColor(pill)).toEqual("rgb(0, 0, 0)");
     expectNoCrash();
   });
 });
@@ -505,7 +520,7 @@ describe("Incident Episode detail page: current state", () => {
     const pill: HTMLElement = pillFor("Current State");
 
     expect(pill.textContent).toContain("Acknowledged");
-    expect(pill.style.backgroundColor).toEqual("rgb(245, 158, 11)");
+    expect(pillColor(pill)).toEqual("rgb(245, 158, 11)");
     expectNoCrash();
   });
 
@@ -525,9 +540,7 @@ describe("Incident Episode detail page: current state", () => {
       state: buildState("Created", null),
     });
 
-    expect(pillFor("Current State").style.backgroundColor).toEqual(
-      "rgb(0, 0, 0)",
-    );
+    expect(pillColor(pillFor("Current State"))).toEqual("rgb(0, 0, 0)");
     expectNoCrash();
   });
 });