@oneuptime/common 14.0.7 → 14.0.9

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

@@ -32,6 +32,7 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
 const getListMock: MockFunction = getJestMockFunction();
 const getItemMock: MockFunction = getJestMockFunction();
 const updateByIdMock: MockFunction = getJestMockFunction();
+const createOrUpdateMock: MockFunction = getJestMockFunction();
 
 const recordedProps: Record<string, Array<Record<string, unknown>>> = {};
 const mountCounts: Record<string, number> = {};
@@ -92,6 +93,9 @@ jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
       updateById: (...args: Array<unknown>) => {
         return updateByIdMock(...args);
       },
+      createOrUpdate: (...args: Array<unknown>) => {
+        return createOrUpdateMock(...args);
+      },
     },
   };
 });
@@ -326,9 +330,23 @@ import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
 import ObjectID from "../../../Types/ObjectID";
 import StatusPageSubscriberNotificationStatus from "../../../Types/StatusPage/StatusPageSubscriberNotificationStatus";
+import IncidentCreatedResend from "../../../Types/StatusPage/IncidentCreatedResend";
+import ModelForm, {
+  FormType,
+  ModelField,
+} from "../../../UI/Components/Forms/ModelForm";
+import { ModalWidth } from "../../../UI/Components/Modal/Modal";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Includes from "../../../Types/BaseDatabase/Includes";
+import { JSONObject } from "../../../Types/JSON";
+import JSONFunctions from "../../../Types/JSONFunctions";
+import SubscriberNotificationResendCopy from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPageSubscribers/SubscriberNotificationResendCopy";
 import { DetailStyle } from "../../../UI/Components/Detail/Detail";
 import FormFieldSchemaType from "../../../UI/Components/Forms/Types/FormFieldSchemaType";
 import Navigation from "../../../UI/Utils/Navigation";
+import PermissionUtil from "../../../UI/Utils/Permission";
+import User from "../../../UI/Utils/User";
+import Permission from "../../../Types/Permission";
 
 const EVENT_ID: string = "11111111-1111-4111-8111-111111111111";
 const OTHER_EVENT_ID: string = "22222222-2222-4222-8222-222222222222";
@@ -378,6 +396,11 @@ function propsHistory<T>(key: string): Array<T> {
   return (recordedProps[key] || []) as unknown as Array<T>;
 }
 
+// What the incident overview hands the notification status badge.
+type ResendStatusProps = {
+  onResendNotification: (options: { isToAllStatusPages: boolean }) => void;
+};
+
 function latestProps<T>(key: string): T {
   const history: Array<T> = propsHistory<T>(key);
 
@@ -534,6 +557,8 @@ const INCIDENT_CASE: PageCase = {
     "Declared By",
     "On-Call Duty Policies",
     "Subscriber Notification Status",
+    // The status pages the incident is limited to, read only.
+    "Status Page Scope",
     "Labels",
     "Incident Number",
     "Incident ID",
@@ -758,14 +783,22 @@ const itemRequestId: ItemRequestIdFunction = (args: Array<unknown>): string => {
   return (args[0] as { id: ObjectID }).id.toString();
 };
 
+// What the signed-in user may do; a project member unless a test says so.
+let currentPermissions: Array<Permission> = [Permission.ProjectMember];
+
 beforeEach(() => {
   currentEventId = EVENT_ID;
+  currentPermissions = [Permission.ProjectMember];
 
   jest
     .spyOn(Navigation, "getLastParamAsObjectID")
     .mockImplementation((): ObjectID => {
       return new ObjectID(currentEventId);
     });
+  jest.spyOn(PermissionUtil, "getAllPermissions").mockImplementation(() => {
+    return currentPermissions;
+  });
+  jest.spyOn(User, "isMasterAdmin").mockReturnValue(false);
 });
 
 afterEach(() => {
@@ -773,6 +806,7 @@ afterEach(() => {
   getListMock.mockReset();
   getItemMock.mockReset();
   updateByIdMock.mockReset();
+  createOrUpdateMock.mockReset();
 
   for (const key of Object.keys(recordedProps)) {
     delete recordedProps[key];
@@ -1207,6 +1241,24 @@ describe.each([
         latestProps<{ seriesLabels: unknown }>("SeriesResource").seriesLabels,
       ).toEqual({ "host.name": "prod-01" });
     });
+
+    /*
+     * The Affected Resources editor holds a picker whose placeholder names a
+     * dozen resource types. In the default 512px modal it was cut off and
+     * every chip cramped, so the card edits in a Medium one.
+     */
+    test("the Affected Resources card edits in a Medium modal", async () => {
+      serve(pageCase, { timeline: REOPENED_TIMELINE, title: "Checkout slow" });
+
+      pageCase.renderPage();
+      await waitForPage();
+
+      expect(
+        latestProps<{ createEditModalWidth?: ModalWidth }>(
+          "CardModelDetail:Affected Resources",
+        ).createEditModalWidth,
+      ).toBe(ModalWidth.Medium);
+    });
   });
 
   describe("background refresh", () => {
@@ -1860,7 +1912,13 @@ describe.each([
  */
 interface ResourcesFormFieldProps {
   field?: Record<string, unknown>;
+  title?: string;
+  description?: string;
   fieldType?: FormFieldSchemaType;
+  required?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  dropdownModal?: { type: unknown; labelField: string; valueField: string };
   showIf?: (values: unknown) => boolean;
   getCustomElement?: (values: unknown, elementProps: unknown) => ReactElement;
 }
@@ -2107,9 +2165,9 @@ describe("incident-only behaviour", () => {
     const readsBefore: number = countItemReads();
 
     await act(async () => {
-      latestProps<{ onResendNotification: () => void }>(
+      latestProps<ResendStatusProps>(
         "SubscriberNotificationStatus",
-      ).onResendNotification();
+      ).onResendNotification({ isToAllStatusPages: false });
     });
 
     await waitFor(() => {
@@ -2119,6 +2177,7 @@ describe("incident-only behaviour", () => {
       ).toBe(!refresherBefore);
     });
 
+    // Retry: back to Pending, and the server keeps the record so it resumes.
     expect(updateByIdMock).toHaveBeenCalledTimes(1);
     expect(
       (updateByIdMock.mock.calls[0]![0] as { data: Record<string, unknown> })
@@ -2126,12 +2185,222 @@ describe("incident-only behaviour", () => {
     ).toEqual({
       subscriberNotificationStatusOnIncidentCreated:
         StatusPageSubscriberNotificationStatus.Pending,
-      subscriberNotificationStatusMessage: "Notification queued for resending",
+      subscriberNotificationStatusMessage:
+        IncidentCreatedResend.retryQueuedMessage,
     });
+    expect(createOrUpdateMock).not.toHaveBeenCalled();
     expect(countItemReads()).toBe(readsBefore);
     expect(mountCounts["InvestigationPanel"]).toBe(1);
   });
 
+  test("resending to every status page asks the server to, and re-reads only the details card", async () => {
+    serve(INCIDENT_CASE, {
+      timeline: REOPENED_TIMELINE,
+      title: "Checkout slow",
+    });
+    createOrUpdateMock.mockResolvedValue({});
+
+    INCIDENT_CASE.renderPage();
+    await waitForPage();
+
+    const refresherBefore: boolean | undefined =
+      latestProps<CardModelDetailProps>(
+        "CardModelDetail:Incident Details",
+      ).refresher;
+
+    renderStatusField();
+
+    await act(async () => {
+      latestProps<ResendStatusProps>(
+        "SubscriberNotificationStatus",
+      ).onResendNotification({ isToAllStatusPages: true });
+    });
+
+    await waitFor(() => {
+      expect(
+        latestProps<CardModelDetailProps>("CardModelDetail:Incident Details")
+          .refresher,
+      ).toBe(!refresherBefore);
+    });
+
+    expect(updateByIdMock).not.toHaveBeenCalled();
+    expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+
+    const request: {
+      model: Incident;
+      modelType: unknown;
+      formType: FormType;
+      miscDataProps: Record<string, unknown>;
+    } = createOrUpdateMock.mock.calls[0]![0] as {
+      model: Incident;
+      modelType: unknown;
+      formType: FormType;
+      miscDataProps: Record<string, unknown>;
+    };
+
+    expect(request.modelType).toBe(Incident);
+    expect(request.formType).toBe(FormType.Update);
+    expect(request.model._id?.toString()).toBe(EVENT_ID);
+    expect(request.model.subscriberNotificationStatusOnIncidentCreated).toBe(
+      StatusPageSubscriberNotificationStatus.Pending,
+    );
+    expect(request.miscDataProps).toEqual(
+      IncidentCreatedResend.getMiscDataProps(),
+    );
+  });
+
+  test("offers Resend after a success, confirmed with who this incident reaches now", async () => {
+    serve(INCIDENT_CASE, {
+      timeline: REOPENED_TIMELINE,
+      title: "Checkout slow",
+    });
+
+    INCIDENT_CASE.renderPage();
+    await waitForPage();
+
+    renderStatusField();
+
+    const confirmation: {
+      resendDescription: string;
+      retryDescription: string;
+      retryToAllStatusPagesLabel?: string;
+      retryToAllStatusPagesDescription?: string;
+      audience: ReactElement;
+    } = latestProps<{
+      resendConfirmation: {
+        resendDescription: string;
+        retryDescription: string;
+        retryToAllStatusPagesLabel?: string;
+        retryToAllStatusPagesDescription?: string;
+        audience: ReactElement;
+      };
+    }>("SubscriberNotificationStatus").resendConfirmation;
+
+    expect(confirmation.resendDescription).toBe(
+      SubscriberNotificationResendCopy.incidentCreatedResendDescription,
+    );
+    expect(confirmation.retryDescription).toBe(
+      SubscriberNotificationResendCopy.incidentCreatedRetryDescription,
+    );
+    expect(confirmation.retryToAllStatusPagesLabel).toBe(
+      SubscriberNotificationResendCopy.incidentCreatedRetryToAllStatusPagesLabel,
+    );
+    expect(confirmation.retryToAllStatusPagesDescription).toBe(
+      SubscriberNotificationResendCopy.incidentCreatedResendToAllStatusPagesDescription,
+    );
+
+    const audienceProps: {
+      request: { incidentId: { toString: () => string } };
+    } = confirmation.audience.props as {
+      request: { incidentId: { toString: () => string } };
+    };
+
+    expect(audienceProps.request.incidentId.toString()).toBe(EVENT_ID);
+    expect(audienceProps.request).not.toHaveProperty(
+      "excludeStatusPagesNotifiedOnCreation",
+    );
+  });
+
+  /*
+   * Retry resumes after the pages already sent it in full, so its
+   * confirmation's "Will notify" must not list them: it asks for the audience
+   * without them. Resend, and Retry to every page, keep the full one.
+   */
+  test("Retry's confirmation shows who Retry reaches: without the pages already sent it in full", async () => {
+    serve(INCIDENT_CASE, {
+      timeline: REOPENED_TIMELINE,
+      title: "Checkout slow",
+    });
+
+    INCIDENT_CASE.renderPage();
+    await waitForPage();
+
+    renderStatusField();
+
+    const confirmation: { retryAudience?: ReactElement } = latestProps<{
+      resendConfirmation: { retryAudience?: ReactElement };
+    }>("SubscriberNotificationStatus").resendConfirmation;
+
+    const retryAudienceProps: {
+      request: {
+        incidentId: { toString: () => string };
+        excludeStatusPagesNotifiedOnCreation?: boolean;
+      };
+    } = confirmation.retryAudience!.props as {
+      request: {
+        incidentId: { toString: () => string };
+        excludeStatusPagesNotifiedOnCreation?: boolean;
+      };
+    };
+
+    expect(retryAudienceProps.request.incidentId.toString()).toBe(EVENT_ID);
+    expect(
+      retryAudienceProps.request.excludeStatusPagesNotifiedOnCreation,
+    ).toBe(true);
+  });
+
+  /*
+   * Retry and Resend write the notification's status. A role that may not
+   * is offered neither - the details card used to offer them to everyone,
+   * read-only viewers included, and let the server refuse.
+   */
+  test.each([[[Permission.Viewer]], [[Permission.IncidentViewer]], [[]]])(
+    "a user with %j is offered neither Resend nor Retry",
+    async (permissions: Array<Permission>) => {
+      currentPermissions = permissions;
+      serve(INCIDENT_CASE, {
+        timeline: REOPENED_TIMELINE,
+        title: "Checkout slow",
+      });
+
+      INCIDENT_CASE.renderPage();
+      await waitForPage();
+
+      renderStatusField();
+
+      const statusProps: {
+        onResendNotification?: unknown;
+        resendConfirmation?: unknown;
+      } = latestProps<{
+        onResendNotification?: unknown;
+        resendConfirmation?: unknown;
+      }>("SubscriberNotificationStatus");
+
+      expect(statusProps.onResendNotification).toBeUndefined();
+      expect(statusProps.resendConfirmation).toBeUndefined();
+    },
+  );
+
+  test.each([
+    [[Permission.IncidentMember]],
+    [[Permission.EditProjectIncident]],
+  ])(
+    "a user with %j is offered them",
+    async (permissions: Array<Permission>) => {
+      currentPermissions = permissions;
+      serve(INCIDENT_CASE, {
+        timeline: REOPENED_TIMELINE,
+        title: "Checkout slow",
+      });
+
+      INCIDENT_CASE.renderPage();
+      await waitForPage();
+
+      renderStatusField();
+
+      const statusProps: {
+        onResendNotification?: unknown;
+        resendConfirmation?: unknown;
+      } = latestProps<{
+        onResendNotification?: unknown;
+        resendConfirmation?: unknown;
+      }>("SubscriberNotificationStatus");
+
+      expect(statusProps.onResendNotification).toBeDefined();
+      expect(statusProps.resendConfirmation).toBeDefined();
+    },
+  );
+
   /*
    * The details card is stubbed, so the status row is rendered here from the
    * card's latest props, the way the real card renders it on every page
@@ -2158,9 +2427,9 @@ describe("incident-only behaviour", () => {
 
   const resend: ResendFunction = async (): Promise<void> => {
     await act(async () => {
-      latestProps<{ onResendNotification: () => void }>(
+      latestProps<ResendStatusProps>(
         "SubscriberNotificationStatus",
-      ).onResendNotification();
+      ).onResendNotification({ isToAllStatusPages: false });
     });
     await flush();
   };
@@ -2671,11 +2940,11 @@ describe("alert-only behaviour", () => {
     });
 
     /*
-     * The monitor is shown, never edited: ModelForm loads and saves only the
-     * fields registered here, so leaving the monitor out means saving the
-     * card can neither move the alert to another monitor nor clear it.
+     * Alert.monitor is a single relation, so it is edited with a dropdown of
+     * its own above the picker (as on the Create page), never as a picker
+     * chip. ModelForm loads and saves only the fields registered here.
      */
-    test("its edit form never loads the monitor, so saving cannot change or clear it", () => {
+    test("its edit form offers the monitor in a dropdown of its own, above the picker", () => {
       const formFields: Array<ResourcesFormFieldProps> =
         resourcesCard().formFields;
       const keysOf: (field: ResourcesFormFieldProps) => Array<string> = (
@@ -2686,8 +2955,13 @@ describe("alert-only behaviour", () => {
 
       const formKeys: Array<string> = formFields.flatMap(keysOf);
 
-      expect(formKeys).not.toContain("monitor");
+      // The singular relation, never the incident's plural list.
       expect(formKeys).not.toContain("monitors");
+      /*
+       * The lock is read by the page, not registered: ModelForm submits every
+       * registered field, and nobody may update this column.
+       */
+      expect(formKeys).not.toContain("isCreatedAutomatically");
 
       const visibleFields: Array<ResourcesFormFieldProps> = formFields.filter(
         (field: ResourcesFormFieldProps): boolean => {
@@ -2700,11 +2974,30 @@ describe("alert-only behaviour", () => {
         },
       );
 
-      // The one visible field is the resource picker, registered on hosts.
-      expect(visibleFields.map(keysOf)).toEqual([["hosts"]]);
-      expect(visibleFields[0]!.fieldType).toBe(
-        FormFieldSchemaType.CustomComponent,
-      );
+      // The monitor dropdown first, then the resource picker on hosts.
+      expect(visibleFields.map(keysOf)).toEqual([["monitor"], ["hosts"]]);
+
+      const monitorField: ResourcesFormFieldProps = visibleFields[0]!;
+
+      expect(monitorField.title).toBe("Monitor");
+      expect(monitorField.fieldType).toBe(FormFieldSchemaType.Dropdown);
+      expect(monitorField.dropdownModal).toEqual({
+        type: Monitor,
+        labelField: "name",
+        valueField: "_id",
+      });
+      expect(monitorField.required).toBe(false);
+      /*
+       * The Create page's placeholder: the dashboard translates it by its
+       * English text, and every locale has this spelling.
+       */
+      expect(monitorField.placeholder).toBe("Select Monitor");
+
+      const pickerField: ResourcesFormFieldProps = visibleFields[1]!;
+
+      // Read as a pair with the dropdown above it.
+      expect(pickerField.title).toBe("Other Affected Resources");
+      expect(pickerField.fieldType).toBe(FormFieldSchemaType.CustomComponent);
       // Hidden registrations so the form still loads the other relations.
       expect(hiddenFields.flatMap(keysOf)).toEqual([
         "kubernetesClusters",
@@ -2719,8 +3012,8 @@ describe("alert-only behaviour", () => {
         "services",
       ]);
 
-      // The picker it renders offers no monitors to attach either.
-      render(visibleFields[0]!.getCustomElement!({}, {}));
+      // The picker does not offer monitors: the dropdown is the one place.
+      render(pickerField.getCustomElement!({}, {}));
 
       const picker: { monitors?: unknown; resourceTypes?: Array<string> } =
         latestProps<{ monitors?: unknown; resourceTypes?: Array<string> }>(
@@ -2738,4 +3031,522 @@ describe("alert-only behaviour", () => {
       );
     });
   });
+
+  /*
+   * An alert raised automatically keeps the monitor it was raised with, and
+   * the server refuses to set, change or clear it (AlertService.
+   * onBeforeUpdate). Raised by a monitor, the alert shows that monitor
+   * locked, with the reason; raised without one (an SLO burn-rate or
+   * security-event alert, or one whose monitor was deleted), it has no
+   * Monitor field at all. The page reads which case it is with its own row,
+   * so the lock is known before any card renders.
+   */
+  describe("the Affected Resources card's monitor lock", () => {
+    interface ServedAlert {
+      isCreatedAutomatically: boolean;
+      monitorId?: string | undefined;
+    }
+
+    type ServeAlertFunction = (served: ServedAlert) => void;
+
+    const serveAlert: ServeAlertFunction = (served: ServedAlert): void => {
+      serve(ALERT_CASE, {
+        timeline: REOPENED_TIMELINE,
+        title: "Checkout slow",
+      });
+
+      getItemMock.mockImplementation(() => {
+        const alert: Alert = ALERT_CASE.buildEvent("Checkout slow") as Alert;
+        alert.isCreatedAutomatically = served.isCreatedAutomatically;
+
+        if (served.monitorId) {
+          alert.monitorId = new ObjectID(served.monitorId);
+        }
+
+        return Promise.resolve(alert);
+      });
+    };
+
+    type MonitorFieldFunction = () => ResourcesFormFieldProps;
+
+    const monitorField: MonitorFieldFunction = (): ResourcesFormFieldProps => {
+      const field: ResourcesFormFieldProps | undefined =
+        resourcesCard().formFields.find(
+          (formField: ResourcesFormFieldProps): boolean => {
+            return Boolean(formField.field?.["monitor"]);
+          },
+        );
+
+      if (!field) {
+        throw new Error("The Affected Resources form has no monitor field");
+      }
+
+      return field;
+    };
+
+    type IsMonitorFieldShownFunction = (values: unknown) => boolean;
+
+    // What the form decides for the Monitor field, given its current values.
+    const isMonitorFieldShown: IsMonitorFieldShownFunction = (
+      values: unknown,
+    ): boolean => {
+      const field: ResourcesFormFieldProps = monitorField();
+
+      return !field.showIf || field.showIf(values);
+    };
+
+    const LOCKED_DESCRIPTION: string =
+      "This alert was raised by this monitor, which resolves it automatically when the monitor recovers, so it can't be moved to another monitor or removed.";
+
+    test("the page reads whether the alert was raised automatically, and its monitor, with its own row", async () => {
+      serveAlert({ isCreatedAutomatically: false });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      const pageRead: { select: Record<string, unknown> } | undefined =
+        getItemMock.mock.calls
+          .map((call: Array<unknown>) => {
+            return call[0] as { select: Record<string, unknown> };
+          })
+          .find((request: { select: Record<string, unknown> }): boolean => {
+            return Boolean(request.select["telemetryQuery"]);
+          });
+
+      expect(pageRead).toBeDefined();
+      expect(pageRead!.select["isCreatedAutomatically"]).toBe(true);
+      expect(pageRead!.select["monitorId"]).toBe(true);
+    });
+
+    test("an alert its monitor raised shows the dropdown locked, and says why", async () => {
+      serveAlert({ isCreatedAutomatically: true, monitorId: MONITOR_ID });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      expect(isMonitorFieldShown({ monitor: MONITOR_ID })).toBe(true);
+      expect(monitorField().disabled).toBe(true);
+      expect(monitorField().description).toBe(LOCKED_DESCRIPTION);
+    });
+
+    test("a manual alert's monitor can be changed or cleared", async () => {
+      serveAlert({ isCreatedAutomatically: false, monitorId: MONITOR_ID });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      expect(isMonitorFieldShown({ monitor: MONITOR_ID })).toBe(true);
+      // Cleared in the open form, it stays there to pick another.
+      expect(isMonitorFieldShown({ monitor: null })).toBe(true);
+      expect(monitorField().disabled).toBe(false);
+      expect(monitorField().description).toBe(
+        "Select the monitor affected by this alert.",
+      );
+    });
+
+    test("a manual alert with no monitor can be given one", async () => {
+      serveAlert({ isCreatedAutomatically: false });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      expect(isMonitorFieldShown({})).toBe(true);
+      expect(monitorField().disabled).toBe(false);
+      expect(monitorField().description).toBe(
+        "Select the monitor affected by this alert.",
+      );
+    });
+
+    /*
+     * Nothing to show, and nothing that may be picked: the field is left out
+     * rather than shown empty and locked with a reason that names a monitor
+     * the alert does not have.
+     */
+    test("an automatic alert with no monitor (an SLO burn-rate alert) has no Monitor field", async () => {
+      serveAlert({ isCreatedAutomatically: true });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      expect(isMonitorFieldShown({})).toBe(false);
+      expect(isMonitorFieldShown({ monitor: null })).toBe(false);
+      // Still registered: ModelForm loads it and saves back the null it holds.
+      expect(monitorField().field).toEqual({ monitor: true });
+    });
+
+    /*
+     * Saving the card can set, move or clear a manual alert's monitor. The
+     * details card shows it (and reports it for the header's Monitor fact),
+     * and the lock depends on the page's own row, so both are read again
+     * without a reload. Here, an automatic alert's monitor was deleted while
+     * the page was open: after the save, the row the page reads again has no
+     * monitor, and the field locked on it is left out.
+     */
+    test("saving the card re-reads the details card, the page's lock and the feed", async () => {
+      serveAlert({ isCreatedAutomatically: true, monitorId: MONITOR_ID });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      expect(isMonitorFieldShown({})).toBe(true);
+      expect(monitorField().disabled).toBe(true);
+
+      const refresherBefore: boolean | undefined =
+        latestProps<CardModelDetailProps>(
+          "CardModelDetail:Alert Details",
+        ).refresher;
+      const feedTokenBefore: number = latestProps<{ refreshToken: number }>(
+        "Feed",
+      ).refreshToken;
+      const readsBefore: number = countItemReads();
+
+      // Its monitor was deleted, which leaves the alert's monitorId NULL.
+      serveAlert({ isCreatedAutomatically: true });
+
+      act(() => {
+        latestProps<CardModelDetailProps>("CardModelDetail:Affected Resources")
+          .onSaveSuccess!();
+      });
+
+      await waitFor(() => {
+        expect(isMonitorFieldShown({})).toBe(false);
+      });
+
+      expect(
+        latestProps<CardModelDetailProps>("CardModelDetail:Alert Details")
+          .refresher,
+      ).toBe(!refresherBefore);
+      expect(latestProps<{ refreshToken: number }>("Feed").refreshToken).toBe(
+        feedTokenBefore + 1,
+      );
+      // One background read of the page's own row, and nothing remounted.
+      expect(countItemReads()).toBe(readsBefore + 1);
+      expect(mountCounts["InvestigationPanel"]).toBe(1);
+      expect(mountCounts["Feed"]).toBe(1);
+    });
+  });
+
+  /*
+   * The card's form fields, rendered in the real ModelForm its Edit modal
+   * opens (EntityDropdown included), against the row as the API hands it to
+   * the form: the monitor as `{ _id }` only.
+   */
+  describe("the Affected Resources edit form, rendered", () => {
+    const OTHER_MONITOR_ID: string = "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbb2";
+    const HOST_ID: string = "eeeeeeee-eeee-4eee-8eee-eeeeeeeeeee1";
+    const OTHER_HOST_ID: string = "eeeeeeee-eeee-4eee-8eee-eeeeeeeeeee2";
+
+    const MONITOR_NAMES: Record<string, string> = {
+      [MONITOR_ID]: "Developer portal",
+      [OTHER_MONITOR_ID]: "Payments API",
+    };
+
+    let formLoadSelect: Record<string, unknown> | null = null;
+
+    interface EditFormOptions {
+      isCreatedAutomatically: boolean;
+      // Whether the alert has a monitor. It has MONITOR_ID unless this is false.
+      hasMonitor?: boolean | undefined;
+    }
+
+    type RenderEditFormFunction = (options: EditFormOptions) => Promise<void>;
+
+    const renderEditForm: RenderEditFormFunction = async (
+      options: EditFormOptions,
+    ): Promise<void> => {
+      const hasMonitor: boolean = options.hasMonitor !== false;
+
+      serve(ALERT_CASE, {
+        timeline: REOPENED_TIMELINE,
+        title: "Checkout slow",
+      });
+
+      getItemMock.mockImplementation(() => {
+        const alert: Alert = ALERT_CASE.buildEvent("Checkout slow") as Alert;
+        alert.isCreatedAutomatically = options.isCreatedAutomatically;
+
+        if (hasMonitor) {
+          alert.monitorId = new ObjectID(MONITOR_ID);
+        }
+
+        return Promise.resolve(alert);
+      });
+
+      ALERT_CASE.renderPage();
+      await waitForPage();
+
+      const fields: Array<ModelField<Alert>> = resourcesCard()
+        .formFields as unknown as Array<ModelField<Alert>>;
+
+      // The page has handed over its fields; only the form is needed now.
+      cleanup();
+
+      // The form is about wiring, not about who may edit which column.
+      jest.spyOn(User, "isMasterAdmin").mockReturnValue(true);
+
+      formLoadSelect = null;
+
+      getItemMock.mockImplementation((...args: Array<unknown>) => {
+        formLoadSelect = (args[0] as { select: Record<string, unknown> })
+          .select;
+
+        return Promise.resolve(
+          BaseModel.fromJSON(
+            {
+              _id: EVENT_ID,
+              // The API answers a relation the row does not hold with null.
+              monitor: hasMonitor ? { _id: MONITOR_ID } : null,
+              hosts: [{ _id: HOST_ID }],
+              services: [],
+            },
+            Alert,
+          ) as Alert,
+        );
+      });
+
+      getListMock.mockImplementation((...args: Array<unknown>) => {
+        const request: {
+          modelType: unknown;
+          query: Record<string, unknown>;
+        } = args[0] as {
+          modelType: unknown;
+          query: Record<string, unknown>;
+        };
+
+        if (request.modelType !== Monitor) {
+          return Promise.resolve(listResult([]));
+        }
+
+        const idFilter: unknown = request.query["_id"];
+        const ids: Array<string> =
+          idFilter instanceof Includes
+            ? (idFilter.values as Array<unknown>).map((id: unknown) => {
+                return String(id);
+              })
+            : Object.keys(MONITOR_NAMES);
+
+        return Promise.resolve(
+          listResult(
+            ids
+              .filter((id: string): boolean => {
+                return Boolean(MONITOR_NAMES[id]);
+              })
+              .map((id: string): Monitor => {
+                const monitor: Monitor = new Monitor();
+                monitor._id = id;
+                monitor.name = MONITOR_NAMES[id]!;
+                return monitor;
+              }),
+          ),
+        );
+      });
+
+      createOrUpdateMock.mockResolvedValue({
+        data: new Alert(),
+        miscData: undefined,
+      });
+
+      render(
+        <ModelForm<Alert>
+          modelType={Alert}
+          id="edit-alert-affected-resources"
+          name="Affected Resources"
+          fields={fields}
+          formType={FormType.Update}
+          modelIdToEdit={new ObjectID(EVENT_ID)}
+          submitButtonText="Save Changes"
+          onSuccess={() => {
+            // asserted through createOrUpdateMock
+          }}
+        />,
+      );
+
+      if (hasMonitor) {
+        await screen.findByText("Developer portal");
+        return;
+      }
+
+      // No monitor name to wait for: the picker renders with the fields.
+      await waitFor(() => {
+        expect(propsHistory("AffectedResourcesPicker").length).toBeGreaterThan(
+          0,
+        );
+      });
+    };
+
+    type SaveFunction = () => Promise<Alert>;
+
+    const save: SaveFunction = async (): Promise<Alert> => {
+      fireEvent.click(screen.getByRole("button", { name: "Save Changes" }));
+
+      await waitFor(() => {
+        expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+      });
+
+      return (createOrUpdateMock.mock.calls[0]![0] as { model: Alert }).model;
+    };
+
+    // The body ModelAPI.createOrUpdate sends for this model.
+    type RequestBodyFunction = (model: Alert) => JSONObject;
+
+    const requestBodyOf: RequestBodyFunction = (model: Alert): JSONObject => {
+      return JSONFunctions.serialize(BaseModel.toJSON(model, Alert));
+    };
+
+    type MonitorButtonFunction = () => HTMLButtonElement;
+
+    // The dropdown shows its selection as a button until it is opened.
+    const monitorButton: MonitorButtonFunction = (): HTMLButtonElement => {
+      const button: HTMLButtonElement | null = screen
+        .getByText("Developer portal")
+        .closest("button");
+
+      if (!button) {
+        throw new Error("The monitor dropdown shows no selection");
+      }
+
+      return button;
+    };
+
+    test("loads the monitor as an id and shows its name", async () => {
+      await renderEditForm({ isCreatedAutomatically: false });
+
+      expect(formLoadSelect).not.toBeNull();
+      expect(formLoadSelect!["monitor"]).toBeTruthy();
+      expect(monitorButton()).not.toBeDisabled();
+    });
+
+    test("saving without touching the monitor keeps it", async () => {
+      await renderEditForm({ isCreatedAutomatically: false });
+
+      const saved: Alert = await save();
+
+      expect(saved.monitor?._id?.toString()).toBe(MONITOR_ID);
+      expect(requestBodyOf(saved)["monitor"]).toEqual(
+        expect.objectContaining({ _id: MONITOR_ID }),
+      );
+    });
+
+    test("an edit to the other resources keeps the monitor", async () => {
+      await renderEditForm({ isCreatedAutomatically: false });
+
+      act(() => {
+        latestProps<{ onChange: (payload: unknown) => void }>(
+          "AffectedResourcesPicker",
+        ).onChange([OTHER_HOST_ID]);
+      });
+
+      const saved: Alert = await save();
+
+      expect(saved.monitor?._id?.toString()).toBe(MONITOR_ID);
+      expect(
+        (saved.hosts || []).map((host: BaseModel): string => {
+          return String(host._id);
+        }),
+      ).toEqual([OTHER_HOST_ID]);
+    });
+
+    test("choosing another monitor saves the new one", async () => {
+      await renderEditForm({ isCreatedAutomatically: false });
+
+      fireEvent.click(monitorButton());
+      fireEvent.click(
+        await screen.findByRole("option", { name: /Payments API/ }),
+      );
+
+      const saved: Alert = await save();
+
+      expect(saved.monitor?._id?.toString()).toBe(OTHER_MONITOR_ID);
+      expect(requestBodyOf(saved)["monitor"]).toEqual(
+        expect.objectContaining({ _id: OTHER_MONITOR_ID }),
+      );
+    });
+
+    /*
+     * Clear selection hands the form null. It has to reach the request as an
+     * explicit null: an absent key would leave the monitor where it is.
+     */
+    test("clearing it saves the alert with no monitor", async () => {
+      await renderEditForm({ isCreatedAutomatically: false });
+
+      fireEvent.click(screen.getByRole("button", { name: "Clear selection" }));
+
+      await waitFor(() => {
+        expect(screen.queryByText("Developer portal")).toBeNull();
+      });
+
+      const saved: Alert = await save();
+      const body: JSONObject = requestBodyOf(saved);
+
+      expect(saved.monitor).toBeNull();
+      expect(Object.prototype.hasOwnProperty.call(body, "monitor")).toBe(true);
+      expect(body["monitor"]).toBeNull();
+    });
+
+    test("for an alert its monitor raised, the dropdown cannot be opened or cleared, and saving keeps the monitor", async () => {
+      await renderEditForm({ isCreatedAutomatically: true });
+
+      expect(monitorButton()).toBeDisabled();
+      expect(screen.queryByRole("button", { name: "Clear selection" })).toBe(
+        null,
+      );
+      expect(
+        screen.getByText(/so it can't be moved to another monitor/),
+      ).toBeInTheDocument();
+
+      fireEvent.click(monitorButton());
+
+      expect(screen.queryByRole("listbox")).toBeNull();
+      expect(screen.queryByRole("option", { name: /Payments API/ })).toBeNull();
+
+      const saved: Alert = await save();
+
+      expect(saved.monitor?._id?.toString()).toBe(MONITOR_ID);
+    });
+
+    /*
+     * An automatic alert raised without a monitor has no Monitor field. The
+     * form still loads the hidden field and submits the null it holds, which
+     * the server reads as no change (AlertMonitorEditGuard.test.ts), so the
+     * rest of the card still saves.
+     */
+    test("for an automatic alert with no monitor, the field is left out, and saving keeps it without one", async () => {
+      await renderEditForm({ isCreatedAutomatically: true, hasMonitor: false });
+
+      expect(formLoadSelect!["monitor"]).toBeTruthy();
+      expect(screen.queryByText("Monitor")).toBeNull();
+      expect(screen.queryByPlaceholderText("Select Monitor")).toBeNull();
+      expect(screen.queryByText(/raised by this monitor/)).toBeNull();
+      expect(screen.queryByRole("button", { name: "Clear selection" })).toBe(
+        null,
+      );
+
+      act(() => {
+        latestProps<{ onChange: (payload: unknown) => void }>(
+          "AffectedResourcesPicker",
+        ).onChange([OTHER_HOST_ID]);
+      });
+
+      const saved: Alert = await save();
+      const body: JSONObject = requestBodyOf(saved);
+
+      expect(saved.monitor).toBeNull();
+      expect(body["monitor"]).toBeNull();
+      expect(
+        (saved.hosts || []).map((host: BaseModel): string => {
+          return String(host._id);
+        }),
+      ).toEqual([OTHER_HOST_ID]);
+    });
+
+    test("for a manual alert with no monitor, the dropdown is offered", async () => {
+      await renderEditForm({
+        isCreatedAutomatically: false,
+        hasMonitor: false,
+      });
+
+      expect(screen.getByText("Monitor")).toBeInTheDocument();
+      expect(screen.getByPlaceholderText("Select Monitor")).not.toBeDisabled();
+    });
+  });
 });