@oneuptime/common 12.0.33 → 13.0.0

package/Tests/UI/Components/CustomFields/CustomFieldsDetail.test.tsx

@@ -78,7 +78,9 @@ import CustomFieldsDetail from "../../../../UI/Components/CustomFields/CustomFie
 import BaseModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import Incident from "../../../../Models/DatabaseModels/Incident";
 import IncidentCustomField from "../../../../Models/DatabaseModels/IncidentCustomField";
+import { CardButtonSchema } from "../../../../UI/Components/Card/Card";
 import CustomFieldType from "../../../../Types/CustomField/CustomFieldType";
+import IconProp from "../../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../../Types/JSON";
 import ObjectID from "../../../../Types/ObjectID";
 
@@ -153,6 +155,8 @@ const resolveListWith: ResolveListFunction = (data: Array<BaseModel>): void => {
 interface RenderOptions {
   hideIfEmpty?: boolean | undefined;
   isEditable?: boolean | undefined;
+  additionalButtons?: Array<CardButtonSchema> | undefined;
+  onValuesLoaded?: ((customFields: JSONObject) => void) | undefined;
 }
 
 type RenderCardFunction = (options?: RenderOptions) => void;
@@ -169,6 +173,8 @@ const renderCard: RenderCardFunction = (options?: RenderOptions): void => {
       modelId={INCIDENT_ID}
       hideIfEmpty={options?.hideIfEmpty}
       isEditable={options?.isEditable}
+      additionalButtons={options?.additionalButtons}
+      onValuesLoaded={options?.onValuesLoaded}
     />,
   );
 };
@@ -717,3 +723,157 @@ describe("CustomFieldsDetail - a rejected save", () => {
     expect(container).toBeEmptyDOMElement();
   });
 });
+
+/*
+ * Both props exist for the Monitor Template's Custom Field Defaults card
+ * (issue #3548), which needs a second button — "Sync Custom Fields to Linked
+ * Monitors" — and needs to word and enable that button from the values this
+ * card has actually loaded.
+ */
+describe("CustomFieldsDetail - additionalButtons", () => {
+  const buildSyncButton: (onClick: () => void) => CardButtonSchema = (
+    onClick: () => void,
+  ): CardButtonSchema => {
+    return {
+      title: "Sync Custom Fields",
+      icon: IconProp.Refresh,
+      onClick: onClick,
+    };
+  };
+
+  test("renders beside the edit button and calls back when clicked", async () => {
+    const onSyncClick: MockFunction = getJestMockFunction();
+    resolveListWith(buildSchema([{ name: "Vendor" }]));
+    getItemMock.mockResolvedValue(buildIncident({ Vendor: "Cisco" }) as never);
+
+    renderCard({
+      additionalButtons: [
+        buildSyncButton(() => {
+          onSyncClick();
+        }),
+      ],
+    });
+
+    expect(await screen.findByText("Edit Fields")).toBeInTheDocument();
+    const syncButton: HTMLElement = screen.getByText("Sync Custom Fields");
+
+    fireEvent.click(syncButton);
+
+    expect(onSyncClick).toHaveBeenCalledTimes(1);
+  });
+
+  /*
+   * A disabled extra button stays on screen: its tooltip is where the reason
+   * lives ("Set at least one default above before syncing"), and a button that
+   * vanishes takes the explanation with it.
+   */
+  test("honours disabled without removing the button", async () => {
+    const onSyncClick: MockFunction = getJestMockFunction();
+    resolveListWith(buildSchema([{ name: "Vendor" }]));
+    getItemMock.mockResolvedValue(buildIncident(undefined) as never);
+
+    renderCard({
+      additionalButtons: [
+        {
+          ...buildSyncButton(() => {
+            onSyncClick();
+          }),
+          disabled: true,
+        },
+      ],
+    });
+
+    fireEvent.click(await screen.findByText("Sync Custom Fields"));
+
+    expect(onSyncClick).not.toHaveBeenCalled();
+  });
+
+  /*
+   * The gating on "Edit Fields" is about whether there is anything to edit
+   * here. Whether a push to OTHER records is worth offering is the caller's
+   * question, and it still has an answer on a record with no values — that is
+   * exactly when the caller wants to say why the push is unavailable.
+   */
+  test("renders even when there is no edit button to sit beside", async () => {
+    resolveListWith([]);
+    getItemMock.mockResolvedValue(buildIncident(undefined) as never);
+
+    renderCard({
+      additionalButtons: [
+        buildSyncButton(() => {
+          // Nothing: this test is about the button existing.
+        }),
+      ],
+    });
+
+    expect(await screen.findByText(NO_FIELDS_MESSAGE)).toBeInTheDocument();
+    expect(screen.queryByText("Edit Fields")).not.toBeInTheDocument();
+    expect(screen.getByText("Sync Custom Fields")).toBeInTheDocument();
+  });
+});
+
+describe("CustomFieldsDetail - onValuesLoaded", () => {
+  test("reports the record's stored bag once the load settles", async () => {
+    const onValuesLoaded: MockFunction = getJestMockFunction();
+    resolveListWith(buildSchema([{ name: "Vendor" }]));
+    getItemMock.mockResolvedValue(buildIncident({ Vendor: "Cisco" }) as never);
+
+    renderCard({
+      onValuesLoaded: (customFields: JSONObject): void => {
+        onValuesLoaded(customFields);
+      },
+    });
+
+    await waitFor(() => {
+      expect(onValuesLoaded).toHaveBeenCalledWith({ Vendor: "Cisco" });
+    });
+  });
+
+  // A record with nothing stored is a value, not a missing callback.
+  test("reports an empty bag for a record with no custom fields", async () => {
+    const onValuesLoaded: MockFunction = getJestMockFunction();
+    resolveListWith(buildSchema([{ name: "Vendor" }]));
+    getItemMock.mockResolvedValue(buildIncident(undefined) as never);
+
+    renderCard({
+      onValuesLoaded: (customFields: JSONObject): void => {
+        onValuesLoaded(customFields);
+      },
+    });
+
+    await waitFor(() => {
+      expect(onValuesLoaded).toHaveBeenCalledWith({});
+    });
+  });
+
+  /*
+   * The reason this is a callback rather than something the caller fetches
+   * itself: an edit made in this card has to reach the caller, or its extra
+   * button goes on explaining a state that is two saves out of date.
+   */
+  test("reports again with the new values after a save", async () => {
+    const onValuesLoaded: MockFunction = getJestMockFunction();
+    resolveListWith(buildSchema([{ name: "Vendor" }]));
+    getItemMock.mockResolvedValue(buildIncident(undefined) as never);
+    updateByIdMock.mockResolvedValue(undefined as never);
+
+    renderCard({
+      onValuesLoaded: (customFields: JSONObject): void => {
+        onValuesLoaded(customFields);
+      },
+    });
+
+    await waitFor(() => {
+      expect(onValuesLoaded).toHaveBeenCalledWith({});
+    });
+
+    getItemMock.mockResolvedValue(buildIncident({ Vendor: "Cisco" }) as never);
+
+    fireEvent.click(await screen.findByText("Edit Fields"));
+    fireEvent.click(await screen.findByText("Save"));
+
+    await waitFor(() => {
+      expect(onValuesLoaded).toHaveBeenCalledWith({ Vendor: "Cisco" });
+    });
+  });
+});

package/Tests/UI/Components/CustomFields/CustomFieldsDetailMapping.test.tsx

@@ -0,0 +1,324 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * What the Custom Fields card does with a field whose value is copied from the
+ * monitor (OneUptime/oneuptime#3549).
+ *
+ * Two decisions are pinned here, both of which had an obvious-looking wrong
+ * answer:
+ *
+ *   1. A mapped field is left OUT of the edit form rather than rendered
+ *      disabled. `Field.disabled` is honoured by only three of the form's
+ *      input branches — not the Dropdown, multi-select or toggle ones — so a
+ *      "disabled" mapped dropdown would still be editable, and the value would
+ *      silently snap back on the next sync.
+ *
+ *   2. It is only treated as mapped when the record actually HAS a monitor.
+ *      SLO burn-rate alerts, security-event alerts and AI-declared incidents
+ *      are created with none; making the field read-only there would take away
+ *      a field the operator can fill in today and give nothing back, because
+ *      the mapping can never fill it in either.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+const getItemMock: MockFunction = getJestMockFunction();
+const updateByIdMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<string> => {
+        return ["ProjectOwner"];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): { globalPermissions: Array<string> } => {
+        return { globalPermissions: ["ProjectOwner"] };
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+      getItem: (...args: Array<any>) => {
+        return getItemMock(...args);
+      },
+      updateById: (...args: Array<any>) => {
+        return updateByIdMock(...args);
+      },
+    },
+  };
+});
+
+import CustomFieldsDetail from "../../../../UI/Components/CustomFields/CustomFieldsDetail";
+import BaseModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Alert from "../../../../Models/DatabaseModels/Alert";
+import AlertCustomField from "../../../../Models/DatabaseModels/AlertCustomField";
+import Team from "../../../../Models/DatabaseModels/Team";
+import TeamCustomField from "../../../../Models/DatabaseModels/TeamCustomField";
+import CustomFieldMappingSourceResource from "../../../../Types/CustomField/CustomFieldMappingSourceResource";
+import CustomFieldType from "../../../../Types/CustomField/CustomFieldType";
+import { JSONObject } from "../../../../Types/JSON";
+import ObjectID from "../../../../Types/ObjectID";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "11111111-1111-4111-8111-111111111111",
+);
+const ALERT_ID: ObjectID = new ObjectID("22222222-2222-4222-8222-222222222222");
+const MONITOR_ID: ObjectID = new ObjectID(
+  "33333333-3333-4333-8333-333333333333",
+);
+
+interface SchemaFieldInput {
+  name: string;
+  customFieldType?: CustomFieldType | undefined;
+  mapFromResourceType?: string | undefined;
+  mapFromCustomFieldName?: string | undefined;
+}
+
+type BuildSchemaFunction = (
+  fields: Array<SchemaFieldInput>,
+) => Array<AlertCustomField>;
+
+const buildSchema: BuildSchemaFunction = (
+  fields: Array<SchemaFieldInput>,
+): Array<AlertCustomField> => {
+  return fields.map((field: SchemaFieldInput) => {
+    return Object.assign(new AlertCustomField(), {
+      customFieldType: CustomFieldType.Text,
+      ...field,
+    });
+  });
+};
+
+type ResolveListFunction = (data: Array<BaseModel>) => void;
+
+const resolveListWith: ResolveListFunction = (data: Array<BaseModel>): void => {
+  getListMock.mockResolvedValue({
+    data: data,
+    count: data.length,
+    skip: 0,
+    limit: data.length,
+  } as never);
+};
+
+type BuildAlertFunction = (data: {
+  customFields: JSONObject;
+  monitorId?: ObjectID | undefined;
+}) => Alert;
+
+const buildAlert: BuildAlertFunction = (data: {
+  customFields: JSONObject;
+  monitorId?: ObjectID | undefined;
+}): Alert => {
+  const alert: Alert = new Alert();
+  alert.id = ALERT_ID;
+  alert.customFields = data.customFields;
+
+  if (data.monitorId) {
+    alert.monitorId = data.monitorId;
+  }
+
+  return alert;
+};
+
+type RenderCardFunction = () => void;
+
+const renderCard: RenderCardFunction = (): void => {
+  render(
+    <CustomFieldsDetail
+      title="Custom Fields"
+      description="Custom fields for this alert."
+      modelType={Alert}
+      customFieldType={AlertCustomField}
+      name="Alert Custom Fields"
+      projectId={PROJECT_ID}
+      modelId={ALERT_ID}
+    />,
+  );
+};
+
+const MAPPED_VENDOR: SchemaFieldInput = {
+  name: "Vendor",
+  mapFromResourceType: CustomFieldMappingSourceResource.Monitor,
+  mapFromCustomFieldName: "Vendor",
+};
+
+afterEach(() => {
+  cleanup();
+  getListMock.mockReset();
+  getItemMock.mockReset();
+  updateByIdMock.mockReset();
+});
+
+describe("CustomFieldsDetail with a mapped custom field", () => {
+  /*
+   * The mapping metadata only reaches the browser if it is in this select.
+   * Nothing else in the component would fail without it — the field would just
+   * quietly behave as if it were never mapped.
+   */
+  test("asks the API for the mapping configuration", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: { Vendor: "Acme" }, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    await waitFor(() => {
+      expect(getListMock).toHaveBeenCalled();
+    });
+
+    const select: JSONObject = (getListMock.mock.calls[0]![0] as JSONObject)[
+      "select"
+    ] as JSONObject;
+
+    expect(select["mapFromResourceType"]).toBe(true);
+    expect(select["mapFromCustomFieldName"]).toBe(true);
+  });
+
+  /*
+   * Reading the alert's monitor is what lets the card tell a mapped field that
+   * can be filled in from one that never will be.
+   */
+  test("reads the relation the mapping would inherit through", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: {}, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    await waitFor(() => {
+      expect(getItemMock).toHaveBeenCalled();
+    });
+
+    const select: JSONObject = (getItemMock.mock.calls[0]![0] as JSONObject)[
+      "select"
+    ] as JSONObject;
+
+    expect(select["customFields"]).toBe(true);
+    expect(select["monitorId"]).toBe(true);
+  });
+
+  test("says where an inherited value came from", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: { Vendor: "Acme" }, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    expect(
+      await screen.findByText(/Copied from the Monitor custom field "Vendor"/i),
+    ).toBeInTheDocument();
+  });
+
+  test("offers no edit button when every field is inherited", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: { Vendor: "Acme" }, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    await screen.findByText("Vendor");
+
+    expect(screen.queryByText("Edit Fields")).not.toBeInTheDocument();
+  });
+
+  test("still offers editing when some fields are not inherited", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR, { name: "Owner" }]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: { Vendor: "Acme" }, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    expect(await screen.findByText("Edit Fields")).toBeInTheDocument();
+  });
+
+  /*
+   * The regression this is here for: a mapped field on a record with no
+   * monitor must stay editable, or SLO and security-event alerts lose the
+   * ability to carry that field at all.
+   */
+  test("leaves a mapped field editable on a record with no monitor", async () => {
+    resolveListWith(buildSchema([MAPPED_VENDOR]));
+    getItemMock.mockResolvedValue(buildAlert({ customFields: {} }));
+
+    renderCard();
+
+    expect(await screen.findByText("Edit Fields")).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Copied from the Monitor custom field/i),
+    ).not.toBeInTheDocument();
+  });
+
+  test("a definition with no mapping behaves exactly as before", async () => {
+    resolveListWith(buildSchema([{ name: "Owner" }]));
+    getItemMock.mockResolvedValue(
+      buildAlert({ customFields: { Owner: "kate" }, monitorId: MONITOR_ID }),
+    );
+
+    renderCard();
+
+    expect(await screen.findByText("Edit Fields")).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Copied from the Monitor custom field/i),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("CustomFieldsDetail on a resource with no mapping sources", () => {
+  /*
+   * Six of the nine resources have nothing to inherit from. The card must ask
+   * for no relation at all on those — a select naming a column the model does
+   * not have is rejected by the API and takes the whole card down with it.
+   */
+  test("asks for no relation columns", async () => {
+    resolveListWith([
+      Object.assign(new TeamCustomField(), {
+        name: "Vendor",
+        customFieldType: CustomFieldType.Text,
+      }),
+    ]);
+
+    const team: Team = new Team();
+    team.id = ALERT_ID;
+    team.customFields = { Vendor: "Acme" };
+    getItemMock.mockResolvedValue(team);
+
+    render(
+      <CustomFieldsDetail
+        title="Custom Fields"
+        description="Custom fields for this team."
+        modelType={Team}
+        customFieldType={TeamCustomField}
+        name="Team Custom Fields"
+        projectId={PROJECT_ID}
+        modelId={ALERT_ID}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(getItemMock).toHaveBeenCalled();
+    });
+
+    expect((getItemMock.mock.calls[0]![0] as JSONObject)["select"]).toEqual({
+      customFields: true,
+    });
+  });
+});

package/Tests/UI/Components/CustomFields/MapFromCustomFieldInput.test.tsx

@@ -0,0 +1,176 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * The "field to copy from" picker.
+ *
+ * The reason this is a bespoke component rather than a `fetchDropdownOptions`
+ * dropdown is asserted here as behaviour: the offered list depends on ANOTHER
+ * value in the same form (the field type), and BasicForm's option fetch does
+ * not re-run when a value changes. Filtering on every render is what makes
+ * "choose Number, then pick a source" work.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+import MapFromCustomFieldInput from "../../../../UI/Components/CustomFields/MapFromCustomFieldInput";
+import MonitorCustomField from "../../../../Models/DatabaseModels/MonitorCustomField";
+import CustomFieldType from "../../../../Types/CustomField/CustomFieldType";
+import ObjectID from "../../../../Types/ObjectID";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "11111111-1111-4111-8111-111111111111",
+);
+
+interface SourceFieldInput {
+  name: string;
+  customFieldType: CustomFieldType;
+}
+
+type ResolveSourceFieldsFunction = (fields: Array<SourceFieldInput>) => void;
+
+const resolveSourceFields: ResolveSourceFieldsFunction = (
+  fields: Array<SourceFieldInput>,
+): void => {
+  getListMock.mockResolvedValue({
+    data: fields.map((field: SourceFieldInput) => {
+      return Object.assign(new MonitorCustomField(), field);
+    }),
+    count: fields.length,
+    skip: 0,
+    limit: fields.length,
+  } as never);
+};
+
+interface RenderOptions {
+  targetFieldType?: CustomFieldType | undefined;
+  initialValue?: string | undefined;
+}
+
+type RenderPickerFunction = (options?: RenderOptions) => void;
+
+const renderPicker: RenderPickerFunction = (options?: RenderOptions): void => {
+  render(
+    <MapFromCustomFieldInput
+      projectId={PROJECT_ID}
+      sourceDefinitionModelType={MonitorCustomField}
+      sourceTitle="Monitor"
+      targetFieldType={options?.targetFieldType}
+      initialValue={options?.initialValue}
+    />,
+  );
+};
+
+afterEach(() => {
+  cleanup();
+  getListMock.mockReset();
+});
+
+describe("MapFromCustomFieldInput", () => {
+  test("offers the source fields of the same type", async () => {
+    resolveSourceFields([
+      { name: "Vendor", customFieldType: CustomFieldType.Text },
+      { name: "Rack Units", customFieldType: CustomFieldType.Number },
+    ]);
+
+    renderPicker({ targetFieldType: CustomFieldType.Text });
+
+    expect(
+      await screen.findByText("Select a Monitor custom field"),
+    ).toBeInTheDocument();
+  });
+
+  /*
+   * A source of a different type would be accepted by the picker and then
+   * rejected on save, which is a worse experience than never offering it.
+   */
+  test("says so when no source field of this type exists", async () => {
+    resolveSourceFields([
+      { name: "Rack Units", customFieldType: CustomFieldType.Number },
+    ]);
+
+    renderPicker({ targetFieldType: CustomFieldType.Text });
+
+    expect(
+      await screen.findByText(
+        /No Monitor custom field of this type exists in this project/i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test("asks for a field type first when none has been chosen", async () => {
+    resolveSourceFields([
+      { name: "Vendor", customFieldType: CustomFieldType.Text },
+    ]);
+
+    renderPicker({});
+
+    expect(
+      await screen.findByText(/Choose a field type above/i),
+    ).toBeInTheDocument();
+  });
+
+  /*
+   * A mapping whose source field was renamed or deleted has quietly stopped
+   * resolving. Dropping the stale value from the picker would hide that; the
+   * settings page is the only place anyone would find out.
+   */
+  test("keeps showing a configured source that no longer exists, flagged", async () => {
+    resolveSourceFields([
+      { name: "Supplier", customFieldType: CustomFieldType.Text },
+    ]);
+
+    renderPicker({
+      targetFieldType: CustomFieldType.Text,
+      initialValue: "Vendor",
+    });
+
+    expect(
+      await screen.findByText(/Vendor \(no longer available on Monitor\)/i),
+    ).toBeInTheDocument();
+  });
+
+  test("reads the source definitions for this project", async () => {
+    resolveSourceFields([
+      { name: "Vendor", customFieldType: CustomFieldType.Text },
+    ]);
+
+    renderPicker({ targetFieldType: CustomFieldType.Text });
+
+    await waitFor(() => {
+      expect(getListMock).toHaveBeenCalled();
+    });
+
+    const args: Record<string, any> = getListMock.mock.calls[0]![0] as Record<
+      string,
+      any
+    >;
+
+    expect(args["modelType"]).toBe(MonitorCustomField);
+    expect(args["query"]["projectId"]).toBe(PROJECT_ID);
+    expect(args["select"]["name"]).toBe(true);
+    expect(args["select"]["customFieldType"]).toBe(true);
+  });
+
+  test("reports a failed read instead of rendering an empty picker", async () => {
+    getListMock.mockRejectedValue(new Error("Not authorized") as never);
+
+    renderPicker({ targetFieldType: CustomFieldType.Text });
+
+    expect(await screen.findByText(/Not authorized/i)).toBeInTheDocument();
+  });
+});