@oneuptime/common 14.0.13 → 14.0.14

package/Tests/UI/Components/Forms/FormFieldDropdownChange.test.tsx

@@ -0,0 +1,294 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * A Dropdown or MultiSelectDropdown field's onChange is told what the pick
+ * was, as the list showed it: its fourth argument holds the options picked
+ * now and before, with their labels (Dropdown/DropdownChange). A field can
+ * then fill in a name after what was picked - a status page resource's
+ * display name follows its monitor - without asking the server again.
+ *
+ * Both kinds of dropdown a form draws: a list of records (EntityDropdown,
+ * which knows the labels of what it searched for) and a fixed list (whose
+ * options are all on the field).
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<unknown>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+import FormField from "../../../../UI/Components/Forms/Fields/FormField";
+import Field from "../../../../UI/Components/Forms/Types/Field";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import Monitor from "../../../../Models/DatabaseModels/Monitor";
+import { JSONObject } from "../../../../Types/JSON";
+
+interface TestEntity extends JSONObject {
+  monitor?: string;
+  severity?: string;
+  tags?: Array<string>;
+}
+
+const MONITOR_ID: string = "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbc1";
+const OTHER_MONITOR_ID: string = "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbc2";
+
+let setFieldValue: MockFunction;
+let setFormValues: MockFunction;
+let onChange: MockFunction;
+
+type RenderFieldFunction = (data: {
+  field: Field<TestEntity>;
+  fieldName: string;
+  currentValues: FormValues<TestEntity>;
+}) => void;
+
+const renderField: RenderFieldFunction = (data: {
+  field: Field<TestEntity>;
+  fieldName: string;
+  currentValues: FormValues<TestEntity>;
+}): void => {
+  render(
+    <FormField<TestEntity>
+      field={data.field}
+      fieldName={data.fieldName}
+      index={0}
+      isDisabled={false}
+      error=""
+      touched={false}
+      currentValues={data.currentValues}
+      setFieldTouched={() => {}}
+      setFieldValue={setFieldValue}
+      setFormValues={setFormValues}
+    />,
+  );
+};
+
+beforeEach(() => {
+  setFieldValue = getJestMockFunction();
+  setFormValues = getJestMockFunction();
+  onChange = getJestMockFunction();
+
+  getListMock.mockReset();
+  getListMock.mockImplementation(async () => {
+    const monitors: Array<Monitor> = [MONITOR_ID, OTHER_MONITOR_ID].map(
+      (id: string, index: number): Monitor => {
+        const monitor: Monitor = new Monitor();
+        monitor._id = id;
+        monitor.name = index === 0 ? "Developer portal" : "Payments API";
+        return monitor;
+      },
+    );
+
+    return { data: monitors, count: monitors.length, skip: 0, limit: 50 };
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("FormField: a list of records tells onChange what was picked", () => {
+  const monitorField: Field<TestEntity> = {
+    title: "Monitor",
+    field: { monitor: true },
+    fieldType: FormFieldSchemaType.Dropdown,
+    dropdownModal: {
+      type: Monitor,
+      labelField: "name",
+      valueField: "_id",
+    },
+    // What ModelForm hands the field: the options it fetched.
+    dropdownOptions: [
+      { value: MONITOR_ID, label: "Developer portal" },
+      { value: OTHER_MONITOR_ID, label: "Payments API" },
+    ],
+    required: true,
+    placeholder: "Select Monitor",
+  } as Field<TestEntity>;
+
+  test("the new monitor and the one it replaced, with their names", async () => {
+    const currentValues: FormValues<TestEntity> = {
+      monitor: MONITOR_ID,
+    } as FormValues<TestEntity>;
+
+    renderField({
+      field: { ...monitorField, onChange: onChange },
+      fieldName: "monitor",
+      currentValues,
+    });
+
+    // The dropdown shows its selection as a button until it is opened.
+    fireEvent.click(screen.getByText("Developer portal").closest("button")!);
+    fireEvent.click(
+      await screen.findByRole("option", { name: /Payments API/ }),
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    const [value, values, setter, change] = onChange.mock.calls[0] as [
+      unknown,
+      unknown,
+      unknown,
+      { selectedOptions: Array<unknown>; previousOptions: Array<unknown> },
+    ];
+
+    expect(value).toBe(OTHER_MONITOR_ID);
+    expect(values).toBe(currentValues);
+    expect(typeof setter).toBe("function");
+    expect(change.selectedOptions).toEqual([
+      expect.objectContaining({
+        value: OTHER_MONITOR_ID,
+        label: "Payments API",
+      }),
+    ]);
+    expect(change.previousOptions).toEqual([
+      expect.objectContaining({
+        value: MONITOR_ID,
+        label: "Developer portal",
+      }),
+    ]);
+
+    // And the form still stores the id, as before.
+    expect(setFieldValue).toHaveBeenCalledWith("monitor", OTHER_MONITOR_ID);
+  });
+
+  test("onChange's form setter still replaces the form's values", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup();
+
+    renderField({
+      field: {
+        ...monitorField,
+        onChange: (
+          _value: unknown,
+          values: FormValues<TestEntity>,
+          setNewFormValues: (values: FormValues<TestEntity>) => void,
+        ): void => {
+          setNewFormValues({ ...values, severity: "high" });
+        },
+      },
+      fieldName: "monitor",
+      currentValues: {} as FormValues<TestEntity>,
+    });
+
+    await user.click(screen.getByRole("combobox", { name: "Monitor" }));
+    await user.click(
+      await screen.findByRole("option", { name: /Payments API/ }),
+    );
+
+    expect(setFormValues).toHaveBeenCalledWith({ severity: "high" });
+  });
+});
+
+describe("FormField: a fixed list tells onChange what was picked", () => {
+  test("a single pick, and the one it replaced", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup();
+
+    renderField({
+      field: {
+        title: "Severity",
+        field: { severity: true },
+        fieldType: FormFieldSchemaType.Dropdown,
+        dropdownOptions: [
+          { value: "high", label: "High" },
+          { value: "low", label: "Low" },
+        ],
+        required: true,
+        onChange: onChange,
+      } as Field<TestEntity>,
+      fieldName: "severity",
+      currentValues: { severity: "high" } as FormValues<TestEntity>,
+    });
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Low" }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0]![0]).toBe("low");
+    expect(onChange.mock.calls[0]![3]).toEqual({
+      selectedOptions: [{ value: "low", label: "Low" }],
+      previousOptions: [{ value: "high", label: "High" }],
+    });
+  });
+
+  test("a multi-select: everything picked now, and what was picked before", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup();
+
+    renderField({
+      field: {
+        title: "Tags",
+        field: { tags: true },
+        fieldType: FormFieldSchemaType.MultiSelectDropdown,
+        dropdownOptions: [
+          {
+            label: "Kinds",
+            options: [
+              { value: "a", label: "Alpha" },
+              { value: "b", label: "Beta" },
+            ],
+          },
+        ],
+        required: false,
+        onChange: onChange,
+      } as Field<TestEntity>,
+      fieldName: "tags",
+      currentValues: { tags: ["a"] } as FormValues<TestEntity>,
+    });
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Beta" }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0]![3]).toEqual({
+      selectedOptions: [
+        { value: "a", label: "Alpha" },
+        { value: "b", label: "Beta" },
+      ],
+      previousOptions: [{ value: "a", label: "Alpha" }],
+    });
+  });
+
+  test("a field without an onChange still stores its pick", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup();
+
+    renderField({
+      field: {
+        title: "Severity",
+        field: { severity: true },
+        fieldType: FormFieldSchemaType.Dropdown,
+        dropdownOptions: [
+          { value: "high", label: "High" },
+          { value: "low", label: "Low" },
+        ],
+        required: true,
+      } as Field<TestEntity>,
+      fieldName: "severity",
+      currentValues: {} as FormValues<TestEntity>,
+    });
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "High" }));
+
+    expect(setFieldValue).toHaveBeenCalledWith("severity", "high");
+  });
+});

package/Tests/UI/Components/Forms/FormModalWidth.test.tsx

@@ -1,13 +1,15 @@
 import "@testing-library/jest-dom";
 import { afterEach, describe, expect, jest, test } from "@jest/globals";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { JSONObject } from "../../../../Types/JSON";
 import ObjectID from "../../../../Types/ObjectID";
 import Permission from "../../../../Types/Permission";
 import BasicFormModal from "../../../../UI/Components/FormModal/BasicFormModal";
 import { FormType } from "../../../../UI/Components/Forms/ModelForm";
-import Field from "../../../../UI/Components/Forms/Types/Field";
+import Field, {
+  FormFieldCollapsibleSection,
+} from "../../../../UI/Components/Forms/Types/Field";
 import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
 import {
   MARKDOWN_FORM_MODAL_WIDTH,
@@ -131,6 +133,24 @@ const markdownField: Field<JSONObject> = {
   stepId: "note",
 };
 
+/*
+ * An editor folded away in a collapsed section - the optional note of an
+ * Acknowledge or Resolve confirm - is not on screen until the section is
+ * opened.
+ */
+const NOTE_SECTION: FormFieldCollapsibleSection<JSONObject> = {
+  id: "note",
+  title: "Add a note",
+  openWhenConfigured: false,
+};
+
+const foldedMarkdownField: Field<JSONObject> = {
+  field: { note: true },
+  title: "Note",
+  fieldType: FormFieldSchemaType.Markdown,
+  collapsibleSection: NOTE_SECTION,
+};
+
 const STEPS: Array<{ title: string; id: string }> = [
   { title: "Info", id: "info" },
   { title: "Note", id: "note" },
@@ -182,6 +202,29 @@ describe("which forms count as having a Markdown editor", () => {
     expect(hasMarkdownField(undefined)).toBe(false);
     expect(hasMarkdownField(null)).toBe(false);
   });
+
+  test("one whose editor is folded away: only while its section is open", () => {
+    expect(hasMarkdownField([textField, foldedMarkdownField], [])).toBe(false);
+    expect(
+      hasMarkdownField([textField, foldedMarkdownField], ["advanced"]),
+    ).toBe(false);
+    expect(hasMarkdownField([textField, foldedMarkdownField], ["note"])).toBe(
+      true,
+    );
+  });
+
+  test("one with an editor that is not folded, whatever is open", () => {
+    expect(
+      hasMarkdownField([foldedMarkdownField, { ...markdownField }], []),
+    ).toBe(true);
+  });
+
+  test("one whose folded editor nobody tracks counts it, as before", () => {
+    expect(hasMarkdownField([textField, foldedMarkdownField])).toBe(true);
+    expect(hasMarkdownField([textField, foldedMarkdownField], undefined)).toBe(
+      true,
+    );
+  });
 });
 
 describe("the width of a form's dialog", () => {
@@ -200,6 +243,30 @@ describe("the width of a form's dialog", () => {
     }
   });
 
+  test("is what the page asked for while the only editor is folded, and wide once it is opened", () => {
+    for (const width of [
+      undefined,
+      ModalWidth.Normal,
+      ModalWidth.Medium,
+      ModalWidth.Large,
+    ]) {
+      expect(
+        getFormModalWidth({
+          fields: [textField, foldedMarkdownField],
+          width,
+          openSectionIds: [],
+        }),
+      ).toBe(width);
+      expect(
+        getFormModalWidth({
+          fields: [textField, foldedMarkdownField],
+          width,
+          openSectionIds: ["note"],
+        }),
+      ).toBe(ModalWidth.Large);
+    }
+  });
+
   test("is left as it was for every other form", () => {
     for (const width of [
       undefined,
@@ -301,6 +368,174 @@ describe("BasicFormModal", () => {
   });
 });
 
+/*
+ * The confirm the state change dialogs are now: a short form with its
+ * editor folded. It opens at its own width and grows to the wide one when
+ * the editor is opened to be written - in a real dialog, with the section
+ * reporting itself.
+ */
+describe("a dialog whose Markdown editor is folded away", () => {
+  function noteFold(): HTMLElement {
+    return screen.getByRole("button", { name: "Add a note" });
+  }
+
+  test("BasicFormModal opens at its own width and grows wide while the note is open", () => {
+    renderBasicFormModal({
+      fields: [textField, foldedMarkdownField],
+      withSteps: false,
+    });
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+    expect(noteFold()).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(noteFold());
+
+    expect(noteFold()).toHaveAttribute("aria-expanded", "true");
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+    expect(dialog()).not.toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+
+    // Folded again, the dialog is the short one again.
+    fireEvent.click(noteFold());
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+    expect(dialog()).not.toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+  });
+
+  test("BasicFormModal keeps the width its page asked for until the note is opened", () => {
+    renderBasicFormModal({
+      fields: [textField, foldedMarkdownField],
+      withSteps: false,
+      modalWidth: ModalWidth.Medium,
+    });
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Medium]!);
+
+    fireEvent.click(noteFold());
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+  });
+
+  test("the editor is drawn while folded, hidden, so what was written is kept", () => {
+    renderBasicFormModal({
+      fields: [textField, foldedMarkdownField],
+      withSteps: false,
+    });
+
+    const toolbar: HTMLElement = screen.getByTestId("markdown-editor-toolbar");
+
+    expect(toolbar.closest("[hidden]")).not.toBeNull();
+
+    fireEvent.click(noteFold());
+
+    expect(toolbar.closest("[hidden]")).toBeNull();
+  });
+
+  test("an editor that is not folded still opens the dialog wide from the start", () => {
+    renderBasicFormModal({
+      fields: [textField, foldedMarkdownField, { ...longTextField }],
+      withSteps: false,
+    });
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+    cleanup();
+
+    renderBasicFormModal({
+      fields: [
+        textField,
+        foldedMarkdownField,
+        { ...markdownField, field: { body: true }, title: "Body" },
+      ],
+      withSteps: false,
+    });
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+  });
+
+  test("a folded section that starts open - something in it, on an edit form - is wide from the first paint", () => {
+    render(
+      <BasicFormModal<JSONObject>
+        title="Edit Note"
+        submitButtonText="Save"
+        onClose={getJestMockFunction()}
+        onSubmit={getJestMockFunction()}
+        formProps={{
+          id: "form-modal-width-open-section",
+          disableAutofocus: true,
+          initialValues: { title: "Checkout outage", note: "Rolled back." },
+          fields: [
+            textField,
+            {
+              ...foldedMarkdownField,
+              // A section of details someone wrote opens to show them.
+              collapsibleSection: { id: "note", title: "Add a note" },
+            },
+          ].map((field: Field<JSONObject>) => {
+            const withoutStep: Field<JSONObject> = { ...field };
+            delete withoutStep.stepId;
+            return withoutStep;
+          }),
+        }}
+      />,
+    );
+
+    expect(noteFold()).toHaveAttribute("aria-expanded", "true");
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+  });
+
+  test("ModelFormModal opens a create form with a folded note short and grows wide when the note is opened", async () => {
+    render(
+      <ModelFormModal<IncidentNoteTemplate>
+        title="Create New Incident Note Template"
+        modelType={IncidentNoteTemplate}
+        onClose={getJestMockFunction()}
+        onSuccess={getJestMockFunction()}
+        submitButtonText="Create Incident Note Template"
+        formProps={{
+          id: "create-IncidentNoteTemplate-folded",
+          name: "create-IncidentNoteTemplate-folded",
+          modelType: IncidentNoteTemplate,
+          formType: FormType.Create,
+          fields: [
+            {
+              field: { templateName: true },
+              title: "Template Name",
+              fieldType: FormFieldSchemaType.Text,
+              required: true,
+            },
+            {
+              field: { note: true },
+              title: "Note",
+              fieldType: FormFieldSchemaType.Markdown,
+              required: false,
+              collapsibleSection: {
+                id: "note",
+                title: "Add a note",
+                openWhenConfigured: false,
+              },
+            },
+          ],
+        }}
+      />,
+    );
+
+    // ModelForm draws its fields once it has prepared them.
+    const fold: HTMLElement = await screen.findByRole("button", {
+      name: "Add a note",
+    });
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+
+    fireEvent.click(fold);
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Large]!);
+    expect(screen.getByTestId("markdown-editor-toolbar")).toBeVisible();
+
+    fireEvent.click(noteFold());
+
+    expect(dialog()).toHaveClass(WIDTH_CLASS[ModalWidth.Normal]!);
+  });
+});
+
 function renderModelFormModal(data: {
   withMarkdown: boolean;
   withSteps: boolean;