@oneuptime/common 13.0.7 → 14.0.0

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

@@ -0,0 +1,395 @@
+import {
+  BURN_RATE_RULE_FORM_FIELDS,
+  BURN_RATE_RULE_FORM_STEPS,
+} from "../../../../../App/FeatureSet/Dashboard/src/Pages/Slo/Utils/BurnRateRuleForm";
+import ServiceLevelObjectiveBurnRateRule from "../../../../Models/DatabaseModels/ServiceLevelObjectiveBurnRateRule";
+import Email from "../../../../Types/Email";
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import Field from "../../../../UI/Components/Forms/Types/Field";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import { FormStep } from "../../../../UI/Components/Forms/Types/FormStep";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import {
+  DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+  DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+} from "../../../../Utils/Slo/SloBurnRateTemplate";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  RenderResult,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import React, { ReactElement } from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+type BurnRateValues = FormValues<ServiceLevelObjectiveBurnRateRule>;
+
+const TEMPLATE_FIELDS: Fields<ServiceLevelObjectiveBurnRateRule> =
+  BURN_RATE_RULE_FORM_FIELDS.filter(
+    (field: Field<ServiceLevelObjectiveBurnRateRule>): boolean => {
+      return [
+        "alertTitleTemplate",
+        "alertDescriptionTemplate",
+        "incidentTitleTemplate",
+        "incidentDescriptionTemplate",
+      ].includes(Object.keys(field.field || {})[0] || "");
+    },
+  );
+
+const OUTPUT_STEPS: Array<FormStep<ServiceLevelObjectiveBurnRateRule>> =
+  BURN_RATE_RULE_FORM_STEPS.filter(
+    (step: FormStep<ServiceLevelObjectiveBurnRateRule>): boolean => {
+      return step.id === "alert-details" || step.id === "incident-details";
+    },
+  );
+
+const DEFAULT_TEMPLATES: BurnRateValues = {
+  alertTitleTemplate: DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+  alertDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+  incidentTitleTemplate: DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+  incidentDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+};
+
+interface FormOptions {
+  initialValues?: BurnRateValues;
+  fields?: Fields<ServiceLevelObjectiveBurnRateRule>;
+}
+
+interface FormResult extends RenderResult {
+  onSubmit: MockFunction;
+  user: UserEvent;
+  view: (options?: FormOptions) => ReactElement;
+}
+
+function renderForm(options: FormOptions = {}): FormResult {
+  const onSubmit: MockFunction = getJestMockFunction();
+  const view: (overrides?: FormOptions) => ReactElement = (
+    overrides: FormOptions = options,
+  ): ReactElement => {
+    return (
+      <BasicForm
+        id="burn-rate-template-defaults"
+        fields={overrides.fields || TEMPLATE_FIELDS}
+        steps={OUTPUT_STEPS}
+        initialValues={{
+          shouldCreateAlert: true,
+          shouldCreateIncident: true,
+          ...overrides.initialValues,
+        }}
+        onSubmit={onSubmit}
+        submitButtonText="Save Rule"
+        disableAutofocus={true}
+      />
+    );
+  };
+
+  return {
+    ...render(view()),
+    onSubmit,
+    view,
+    user: userEvent.setup({ delay: null }),
+  };
+}
+
+async function next(
+  user: UserEvent,
+  expectedTitle: string = DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+): Promise<void> {
+  await user.click(screen.getByRole("button", { name: "Next" }));
+  await waitFor(() => {
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(expectedTitle);
+  });
+}
+
+async function returnToAlert(user: UserEvent): Promise<void> {
+  await user.click(
+    within(screen.getByRole("navigation", { name: "Progress" })).getByText(
+      "Alert",
+    ),
+  );
+  await screen.findByRole("textbox", { name: /^Alert Title/ });
+}
+
+async function descriptionSource(user: UserEvent): Promise<HTMLElement> {
+  await user.click(
+    screen.getByRole("button", { name: "Markdown", exact: true }),
+  );
+  return screen.getByRole("textbox", { name: /Description/ });
+}
+
+describe("BasicForm burn-rate template defaults", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("prefills and submits all four actual template fields while opening their descriptions", async () => {
+    const { user, onSubmit }: FormResult = renderForm();
+
+    expect(
+      await screen.findByRole("textbox", { name: /^Alert Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(
+      screen.getByRole("textbox", { name: /^Alert Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+
+    await next(user);
+
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining(DEFAULT_TEMPLATES),
+      expect.any(Function),
+    );
+  });
+
+  test("preserves distinct existing title and Markdown templates on both steps", async () => {
+    const initialValues: BurnRateValues = {
+      alertTitleTemplate: "Alert: {{sloName}}",
+      alertDescriptionTemplate: "## Alert response\n\nInspect {{ruleName}}.",
+      incidentTitleTemplate: "Incident: {{ruleName}}",
+      incidentDescriptionTemplate:
+        "## Incident response\n\nEscalate {{sloName}}.",
+    };
+    const { user, onSubmit }: FormResult = renderForm({ initialValues });
+
+    expect(
+      await screen.findByRole("textbox", { name: /^Alert Title/ }),
+    ).toHaveValue(initialValues.alertTitleTemplate);
+    expect(await descriptionSource(user)).toHaveValue(
+      initialValues.alertDescriptionTemplate,
+    );
+    await next(user, initialValues.incidentTitleTemplate);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(initialValues.incidentTitleTemplate);
+    expect(await descriptionSource(user)).toHaveValue(
+      initialValues.incidentDescriptionTemplate,
+    );
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining(initialValues),
+      expect.any(Function),
+    );
+  });
+
+  test.each(["", null])(
+    "preserves explicitly empty %p templates when editing",
+    async (empty: string | null) => {
+      const initialValues: BurnRateValues = {
+        alertTitleTemplate: empty,
+        alertDescriptionTemplate: empty,
+        incidentTitleTemplate: empty,
+        incidentDescriptionTemplate: empty,
+      } as unknown as BurnRateValues;
+      const { user, onSubmit }: FormResult = renderForm({ initialValues });
+
+      expect(
+        await screen.findByRole("textbox", { name: /^Alert Title/ }),
+      ).toHaveValue("");
+      expect(
+        screen.getByRole("button", { name: "Description" }),
+      ).toHaveAttribute("aria-expanded", "false");
+      await user.click(screen.getByRole("button", { name: "Description" }));
+      expect(
+        screen.getByRole("textbox", { name: /^Alert Description/ }),
+      ).toBeEmptyDOMElement();
+      await next(user, "");
+      expect(
+        screen.getByRole("textbox", { name: /^Incident Title/ }),
+      ).toHaveValue("");
+      expect(
+        screen.getByRole("button", { name: "Description" }),
+      ).toHaveAttribute("aria-expanded", "false");
+      await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining(initialValues),
+        expect.any(Function),
+      );
+    },
+  );
+
+  test("keeps cleared defaults empty through collapse, later initial values, and step navigation", async () => {
+    const { user, onSubmit, rerender, view }: FormResult = renderForm();
+    await screen.findByRole("textbox", { name: /^Alert Title/ });
+    fireEvent.change(screen.getByRole("textbox", { name: /^Alert Title/ }), {
+      target: { value: "" },
+    });
+    const source: HTMLElement = await descriptionSource(user);
+    fireEvent.change(source, { target: { value: "" } });
+    await user.click(screen.getByRole("button", { name: "Description" }));
+
+    rerender(
+      view({ initialValues: DEFAULT_TEMPLATES, fields: [...TEMPLATE_FIELDS] }),
+    );
+
+    expect(source).not.toBeVisible();
+    expect(source).toHaveValue("");
+    await user.click(screen.getByRole("button", { name: "Description" }));
+    expect(screen.getByRole("textbox", { name: /^Alert Description/ })).toBe(
+      source,
+    );
+    expect(source).toHaveValue("");
+    await next(user);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await returnToAlert(user);
+
+    expect(screen.getByRole("textbox", { name: /^Alert Title/ })).toHaveValue(
+      "",
+    );
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    await user.click(screen.getByRole("button", { name: "Description" }));
+    expect(
+      screen.getByRole("textbox", { name: /^Alert Description/ }),
+    ).toBeEmptyDOMElement();
+    await next(user);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...DEFAULT_TEMPLATES,
+        alertTitleTemplate: "",
+        alertDescriptionTemplate: "",
+      }),
+      expect.any(Function),
+    );
+  }, 120000);
+
+  test("uses asynchronously supplied edit data before field initialization and defaults only missing values", async () => {
+    const { user, onSubmit, rerender, view }: FormResult = renderForm({
+      fields: [],
+    });
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    const initialValues: BurnRateValues = {
+      alertTitleTemplate: "Loaded alert title",
+      alertDescriptionTemplate: "",
+      incidentTitleTemplate: "Loaded incident title",
+    };
+
+    rerender(view({ initialValues, fields: [] }));
+    rerender(view({ initialValues, fields: TEMPLATE_FIELDS }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /^Alert Title/ })).toHaveValue(
+        "Loaded alert title",
+      );
+    });
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    await next(user, "Loaded incident title");
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue("Loaded incident title");
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...initialValues,
+        incidentDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+      }),
+      expect.any(Function),
+    );
+  });
+
+  test("preserves a stored numeric zero instead of displaying the field default", async () => {
+    const onSubmit: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
+    render(
+      <BasicForm
+        fields={[
+          {
+            field: { threshold: true },
+            title: "Threshold",
+            fieldType: FormFieldSchemaType.Number,
+            defaultValue: 9,
+          },
+        ]}
+        initialValues={{ threshold: 0 }}
+        onSubmit={onSubmit}
+        submitButtonText="Save"
+        disableAutofocus={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("spinbutton", { name: /^Threshold/ }),
+      ).toHaveValue(0);
+    });
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { threshold: 0 },
+      expect.any(Function),
+    );
+  });
+
+  test("keeps model Email wrappers visible through the same generic input branch", async () => {
+    const email: Email = new Email("saved.owner@example.com");
+    const onSubmit: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
+    render(
+      <BasicForm
+        fields={[
+          {
+            field: { email: true },
+            title: "Email",
+            fieldType: FormFieldSchemaType.Email,
+          },
+        ]}
+        initialValues={{ email }}
+        onSubmit={onSubmit}
+        submitButtonText="Save"
+        disableAutofocus={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /^Email/ })).toHaveValue(
+        email.toString(),
+      );
+    });
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { email: email.toString() },
+      expect.any(Function),
+    );
+  });
+});

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

@@ -0,0 +1,286 @@
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import Field, {
+  FormFieldCollapsibleSection,
+} from "../../../../UI/Components/Forms/Types/Field";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import { JSONObject } from "../../../../Types/JSON";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import React, { ReactElement } from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+const SECTION: FormFieldCollapsibleSection<JSONObject> = {
+  id: "details",
+  title: "Description and labels",
+  description: "Add context to help responders.",
+  isConfigured: (values: FormValues<JSONObject>): boolean => {
+    return Boolean(values["description"] || values["label"]);
+  },
+};
+
+const FIELDS: Fields<JSONObject> = [
+  {
+    field: { title: true },
+    title: "Incident Title",
+    fieldType: FormFieldSchemaType.Text,
+    required: true,
+    dataTestId: "incident-title",
+  },
+  {
+    field: { description: true },
+    title: "Description",
+    fieldType: FormFieldSchemaType.Text,
+    dataTestId: "description",
+    collapsibleSection: SECTION,
+  },
+  {
+    field: { label: true },
+    title: "Label",
+    fieldType: FormFieldSchemaType.Text,
+    dataTestId: "label",
+    collapsibleSection: SECTION,
+    footerElement: <span>Label guidance</span>,
+    getFooterElement: (
+      values: FormValues<JSONObject>,
+      error?: string,
+    ): ReactElement => {
+      return <span>{error || `Selected: ${values["label"] || "none"}`}</span>;
+    },
+  },
+];
+
+interface RenderFormOptions {
+  fields?: Fields<JSONObject>;
+  initialValues?: FormValues<JSONObject>;
+}
+
+interface RenderFormResult {
+  handleSubmit: MockFunction;
+  user: UserEvent;
+}
+
+function renderForm(options: RenderFormOptions = {}): RenderFormResult {
+  const handleSubmit: MockFunction = getJestMockFunction();
+
+  render(
+    <BasicForm
+      id="collapsible-form"
+      fields={options.fields || FIELDS}
+      initialValues={options.initialValues || { title: "High burn rate" }}
+      showAsColumns={2}
+      disableAutofocus={true}
+      onSubmit={handleSubmit}
+      submitButtonText="Save Rule"
+    />,
+  );
+
+  return { handleSubmit, user: userEvent.setup({ delay: null }) };
+}
+
+async function sectionButton(): Promise<HTMLElement> {
+  return screen.findByRole("button", { name: SECTION.title });
+}
+
+describe("BasicForm collapsible sections", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("groups optional fields in a collapsed full-row section and keeps ordinary fields visible", async () => {
+    const { user }: RenderFormResult = renderForm();
+    const header: HTMLElement = await sectionButton();
+
+    expect(screen.getByTestId("incident-title")).toBeVisible();
+    expect(header).toHaveAttribute("aria-expanded", "false");
+    expect(header.parentElement).toHaveClass("md:col-span-2");
+    expect(screen.getByTestId("description")).not.toBeVisible();
+    expect(screen.getByTestId("label")).not.toBeVisible();
+    expect(screen.queryByRole("textbox", { name: /^Description/ })).toBeNull();
+    expect(screen.queryByText("Configured")).toBeNull();
+
+    await user.click(header);
+
+    expect(header).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("description")).toBeVisible();
+    expect(screen.getByTestId("label")).toBeVisible();
+    expect(screen.getByText(SECTION.description!)).toBeVisible();
+    expect(screen.getByText("Label guidance")).toBeVisible();
+    expect(screen.getByText("Selected: none")).toBeVisible();
+  });
+
+  test("retains mounted controls and values when closing, reopening, and submitting", async () => {
+    const { user, handleSubmit }: RenderFormResult = renderForm();
+    const header: HTMLElement = await sectionButton();
+    await user.click(header);
+    const description: HTMLElement = screen.getByTestId("description");
+
+    fireEvent.change(description, { target: { value: "Investigate traffic" } });
+    fireEvent.change(screen.getByTestId("label"), {
+      target: { value: "Production" },
+    });
+    await user.click(header);
+
+    expect(description).not.toBeVisible();
+    expect(screen.getByTestId("description")).toBe(description);
+    expect(screen.getByText("Configured")).toBeVisible();
+
+    await user.click(header);
+
+    expect(screen.getByTestId("description")).toBe(description);
+    expect(description).toHaveValue("Investigate traffic");
+    expect(screen.getByTestId("label")).toHaveValue("Production");
+    expect(screen.getByText("Selected: Production")).toBeVisible();
+
+    await user.click(header);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(handleSubmit).toHaveBeenCalledWith(
+      {
+        title: "High burn rate",
+        description: "Investigate traffic",
+        label: "Production",
+      },
+      expect.any(Function),
+    );
+  });
+
+  test("opens configured sections when editing existing values", async () => {
+    const { user }: RenderFormResult = renderForm({
+      initialValues: {
+        title: "Existing rule",
+        description: "Existing response instructions",
+      },
+    });
+    const header: HTMLElement = await sectionButton();
+
+    expect(header).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("description")).toBeVisible();
+    expect(screen.getByTestId("description")).toHaveValue(
+      "Existing response instructions",
+    );
+    expect(screen.queryByText("Configured")).toBeNull();
+
+    await user.click(header);
+
+    expect(header).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByText("Configured")).toBeVisible();
+  });
+
+  test("supports keyboard toggles and skips collapsed fields in the tab order", async () => {
+    const { user }: RenderFormResult = renderForm();
+    const header: HTMLElement = await sectionButton();
+
+    header.focus();
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Save Rule" })).toHaveFocus();
+
+    header.focus();
+    await user.keyboard("{Enter}");
+    expect(header).toHaveAttribute("aria-expanded", "true");
+    await user.keyboard(" ");
+    expect(header).toHaveAttribute("aria-expanded", "false");
+  });
+
+  test("opens configured defaults after fields initialize without reopening a manually closed section", async () => {
+    const fields: Fields<JSONObject> = FIELDS.map(
+      (field: Field<JSONObject>): Field<JSONObject> => {
+        return field.dataTestId === "description"
+          ? { ...field, defaultValue: "Default response instructions" }
+          : field;
+      },
+    );
+    const { user }: RenderFormResult = renderForm({ fields });
+    const header: HTMLElement = await sectionButton();
+
+    await waitFor(() => {
+      expect(header).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByTestId("description")).toHaveValue(
+        "Default response instructions",
+      );
+    });
+    await user.click(header);
+    fireEvent.change(screen.getByTestId("incident-title"), {
+      target: { value: "Updated rule" },
+    });
+
+    expect(header).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByTestId("description")).not.toBeVisible();
+  });
+
+  test("opens a collapsed section for validation errors on every submit attempt", async () => {
+    const fields: Fields<JSONObject> = FIELDS.map(
+      (field: Field<JSONObject>): Field<JSONObject> => {
+        return field.dataTestId === "description"
+          ? { ...field, required: true }
+          : field;
+      },
+    );
+    const { user, handleSubmit }: RenderFormResult = renderForm({ fields });
+    const header: HTMLElement = await sectionButton();
+
+    // Untouched required fields do not force optional sections open on mount.
+    expect(header).toHaveAttribute("aria-expanded", "false");
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    await waitFor(() => {
+      expect(header).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByText("Description is required.")).toBeVisible();
+    });
+    expect(handleSubmit).not.toHaveBeenCalled();
+
+    await user.click(header);
+    expect(header).toHaveAttribute("aria-expanded", "false");
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+    await waitFor(() => {
+      expect(header).toHaveAttribute("aria-expanded", "true");
+    });
+
+    fireEvent.change(screen.getByTestId("description"), {
+      target: { value: "Add response context" },
+    });
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  test("preserves ordinary section headings, descriptions, and full-row fields", async () => {
+    renderForm({
+      fields: [
+        {
+          field: { title: true },
+          title: "Incident Title",
+          fieldType: FormFieldSchemaType.Text,
+          dataTestId: "incident-title",
+          sectionTitle: "Incident details",
+          sectionDescription:
+            "Fields without collapsible metadata stay visible.",
+          spanFullRow: true,
+          footerElement: <span>Title guidance</span>,
+        },
+      ],
+    });
+
+    const title: HTMLElement = await screen.findByTestId("incident-title");
+    expect(title).toBeVisible();
+    expect(
+      screen.getByRole("heading", { name: "Incident details" }),
+    ).toBeVisible();
+    expect(
+      screen.getByText("Fields without collapsible metadata stay visible."),
+    ).toBeVisible();
+    expect(screen.getByText("Title guidance").parentElement).toHaveClass(
+      "md:col-span-2",
+    );
+    expect(screen.queryByRole("button", { name: SECTION.title })).toBeNull();
+  });
+});