@oneuptime/common 11.3.28 → 11.4.1

package/Tests/Types/Trace/TraceRecordingRuleDefinition.test.ts

@@ -0,0 +1,308 @@
+import TraceAggregationType from "../../../Types/Trace/TraceAggregationType";
+import TraceRecordingRuleDefinition, {
+  TraceRecordingRuleDefinitionUtil,
+  TraceRecordingRuleSource,
+  TraceRecordingRuleAttributeFilter,
+  TRACE_RECORDING_RULE_MAX_SOURCES,
+  TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH,
+} from "../../../Types/Trace/TraceRecordingRuleDefinition";
+
+describe("TraceRecordingRuleDefinitionUtil", () => {
+  const makeSource: (
+    overrides?: Partial<TraceRecordingRuleSource>,
+  ) => TraceRecordingRuleSource = (
+    overrides: Partial<TraceRecordingRuleSource> = {},
+  ): TraceRecordingRuleSource => {
+    return {
+      alias: "A",
+      aggregationType: TraceAggregationType.Count,
+      ...overrides,
+    };
+  };
+
+  describe("getAggregationOptions", () => {
+    test("every option has a valid value, label and description", () => {
+      const options: Array<{
+        value: TraceAggregationType;
+        label: string;
+        description: string;
+      }> = TraceRecordingRuleDefinitionUtil.getAggregationOptions();
+
+      expect(options.length).toBeGreaterThan(0);
+      for (const option of options) {
+        expect(option.label.length).toBeGreaterThan(0);
+        expect(option.description.length).toBeGreaterThan(0);
+        expect(Object.values(TraceAggregationType)).toContain(option.value);
+      }
+    });
+  });
+
+  describe("getSpanKindOptions", () => {
+    test("includes an 'Any' option with an empty value", () => {
+      const options: Array<{ value: string; label: string }> =
+        TraceRecordingRuleDefinitionUtil.getSpanKindOptions();
+
+      expect(
+        options.some((o: { value: string }): boolean => {
+          return o.value === "";
+        }),
+      ).toBe(true);
+      expect(
+        options.some((o: { value: string }): boolean => {
+          return o.value === "SPAN_KIND_SERVER";
+        }),
+      ).toBe(true);
+    });
+  });
+
+  describe("getSourceAttributeFilters", () => {
+    test("returns the multi-filter entries, trimmed", () => {
+      const filters: Array<TraceRecordingRuleAttributeFilter> =
+        TraceRecordingRuleDefinitionUtil.getSourceAttributeFilters(
+          makeSource({
+            filterAttributes: [{ key: " http.route ", value: " /api " }],
+          }),
+        );
+
+      expect(filters).toEqual([{ key: "http.route", value: "/api" }]);
+    });
+
+    test("drops entries with a missing key or value, and deduplicates by key", () => {
+      const filters: Array<TraceRecordingRuleAttributeFilter> =
+        TraceRecordingRuleDefinitionUtil.getSourceAttributeFilters(
+          makeSource({
+            filterAttributes: [
+              { key: "host", value: "a" },
+              { key: "host", value: "b" }, // duplicate key — dropped
+              { key: "empty", value: "" }, // no value — dropped
+            ],
+          }),
+        );
+
+      expect(filters).toEqual([{ key: "host", value: "a" }]);
+    });
+
+    test("merges the legacy single filter when its key is not already present", () => {
+      const filters: Array<TraceRecordingRuleAttributeFilter> =
+        TraceRecordingRuleDefinitionUtil.getSourceAttributeFilters(
+          makeSource({
+            filterAttributes: [{ key: "host", value: "a" }],
+            filterAttributeKey: "env",
+            filterAttributeValue: "prod",
+          }),
+        );
+
+      expect(filters).toEqual([
+        { key: "host", value: "a" },
+        { key: "env", value: "prod" },
+      ]);
+    });
+
+    test("array entry wins over the legacy filter for the same key", () => {
+      const filters: Array<TraceRecordingRuleAttributeFilter> =
+        TraceRecordingRuleDefinitionUtil.getSourceAttributeFilters(
+          makeSource({
+            filterAttributes: [{ key: "env", value: "staging" }],
+            filterAttributeKey: "env",
+            filterAttributeValue: "prod",
+          }),
+        );
+
+      expect(filters).toEqual([{ key: "env", value: "staging" }]);
+    });
+  });
+
+  describe("getNextAlias", () => {
+    test("returns A when empty and the first free letter otherwise", () => {
+      expect(TraceRecordingRuleDefinitionUtil.getNextAlias(undefined)).toBe(
+        "A",
+      );
+      expect(
+        TraceRecordingRuleDefinitionUtil.getNextAlias([
+          makeSource({ alias: "A" }),
+          makeSource({ alias: "C" }),
+        ]),
+      ).toBe("B");
+    });
+  });
+
+  describe("getEmptyDefinition", () => {
+    test("returns a single Count source aliased A that validates", () => {
+      const def: TraceRecordingRuleDefinition =
+        TraceRecordingRuleDefinitionUtil.getEmptyDefinition();
+
+      expect(def.sources.length).toBe(1);
+      expect(def.sources[0]!.alias).toBe("A");
+      expect(def.sources[0]!.aggregationType).toBe(TraceAggregationType.Count);
+      expect(def.expression).toBe("A");
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError(def),
+      ).toBeNull();
+    });
+  });
+
+  describe("getValidationError", () => {
+    const validDefinition: () => TraceRecordingRuleDefinition =
+      (): TraceRecordingRuleDefinition => {
+        return {
+          sources: [makeSource({ alias: "A" }), makeSource({ alias: "B" })],
+          expression: "A / B * 100",
+        };
+      };
+
+    test("accepts a valid definition", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError(validDefinition()),
+      ).toBeNull();
+    });
+
+    test("requires a definition", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError(undefined),
+      ).toBe("Definition is required.");
+    });
+
+    test("requires at least one source", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [],
+          expression: "A",
+        }),
+      ).toBe("Add at least one source.");
+    });
+
+    test("rejects more than the maximum number of sources", () => {
+      const sources: Array<TraceRecordingRuleSource> = Array.from(
+        { length: TRACE_RECORDING_RULE_MAX_SOURCES + 1 },
+        (_unused: unknown, i: number) => {
+          return makeSource({ alias: "ABCDE"[i] as string });
+        },
+      );
+
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources,
+          expression: "A",
+        }),
+      ).toContain(`at most ${TRACE_RECORDING_RULE_MAX_SOURCES}`);
+    });
+
+    test("rejects an invalid alias", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "1" })],
+          expression: "A",
+        }),
+      ).toContain("single uppercase letter");
+    });
+
+    test("rejects duplicate aliases", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" }), makeSource({ alias: "A" })],
+          expression: "A",
+        }),
+      ).toContain("Duplicate alias");
+    });
+
+    test("requires an aggregation type", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [
+            {
+              alias: "A",
+            } as unknown as TraceRecordingRuleSource,
+          ],
+          expression: "A",
+        }),
+      ).toContain("Aggregation type is required");
+    });
+
+    test("requires both a legacy filter key and value, or neither", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A", filterAttributeValue: "prod" })],
+          expression: "A",
+        }),
+      ).toContain("needs both a key and a value");
+    });
+
+    test("rejects a non-array filterAttributes", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [
+            makeSource({
+              alias: "A",
+              filterAttributes:
+                "nope" as unknown as Array<TraceRecordingRuleAttributeFilter>,
+            }),
+          ],
+          expression: "A",
+        }),
+      ).toContain("Invalid attribute filters");
+    });
+
+    test("rejects a half-specified filter row", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [
+            makeSource({
+              alias: "A",
+              filterAttributes: [{ key: "host", value: "" }],
+            }),
+          ],
+          expression: "A",
+        }),
+      ).toContain("remove the row");
+    });
+
+    test("requires an expression", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" })],
+          expression: "   ",
+        }),
+      ).toBe("Expression is required.");
+    });
+
+    test("rejects an over-length expression", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" })],
+          expression: "A".repeat(
+            TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH + 1,
+          ),
+        }),
+      ).toContain(
+        `${TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH} characters or fewer`,
+      );
+    });
+
+    test("rejects an expression referencing an undefined alias", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" })],
+          expression: "A + B",
+        }),
+      ).toContain("references alias 'B'");
+    });
+
+    test("rejects an expression that references no alias", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" })],
+          expression: "5 + 10",
+        }),
+      ).toContain("must reference at least one source alias");
+    });
+
+    test("rejects an expression with characters outside the DSL grammar", () => {
+      expect(
+        TraceRecordingRuleDefinitionUtil.getValidationError({
+          sources: [makeSource({ alias: "A" }), makeSource({ alias: "B" })],
+          expression: "A & B",
+        }),
+      ).toContain("may only contain");
+    });
+  });
+});

package/Tests/UI/Components/Dropdown.test.tsx

@@ -55,6 +55,23 @@ describe("Dropdown", () => {
     expect(await screen.findByText("2")).toBeInTheDocument();
   });
 
+  test("renders the menu portal above modal surfaces", async () => {
+    const { getByRole } = render(
+      <Dropdown onChange={() => {}} options={options} />,
+    );
+    const dropdown: HTMLElement = getByRole("combobox");
+
+    fireEvent.keyDown(dropdown, { key: "ArrowDown", code: "ArrowDown" });
+    await screen.findByText("1");
+
+    const menuPortal: HTMLElement | null = document.querySelector<HTMLElement>(
+      ".ou-select__menu-portal",
+    );
+
+    expect(menuPortal).toBeInTheDocument();
+    expect(menuPortal).toHaveStyle({ zIndex: "60" });
+  });
+
   test("renders placeholder", async () => {
     const { getByText } = render(
       <Dropdown

package/Tests/UI/Components/EntityDropdown.test.tsx

@@ -0,0 +1,130 @@
+import EntityDropdown from "../../../UI/Components/EntityDropdown/EntityDropdown";
+import {
+  DROPDOWN_MENU_Z_INDEX,
+  DropdownOption,
+} from "../../../UI/Components/Dropdown/Dropdown";
+import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+describe("EntityDropdown", () => {
+  const options: Array<DropdownOption> = [
+    { value: "members", label: "Members" },
+    { value: "admins", label: "Admins" },
+  ];
+  const originalInnerHeight: number = window.innerHeight;
+  const originalInnerWidth: number = window.innerWidth;
+
+  const setViewport: (width: number, height: number) => void = (
+    width: number,
+    height: number,
+  ): void => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: width,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: height,
+    });
+  };
+
+  const makeRect: (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  ) => DOMRect = (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  ): DOMRect => {
+    return {
+      bottom: top + height,
+      height,
+      left,
+      right: left + width,
+      top,
+      width,
+      x: left,
+      y: top,
+      toJSON: (): Record<string, never> => {
+        return {};
+      },
+    } as DOMRect;
+  };
+
+  const openDropdownAt: (rect: DOMRect) => HTMLInputElement = (
+    rect: DOMRect,
+  ): HTMLInputElement => {
+    const input: HTMLInputElement = screen.getByRole("combobox", {
+      name: "Team",
+    }) as HTMLInputElement;
+    const control: HTMLElement | null =
+      input.parentElement?.parentElement || null;
+
+    if (!control) {
+      throw new Error("EntityDropdown control was not rendered.");
+    }
+
+    jest.spyOn(control, "getBoundingClientRect").mockReturnValue(rect);
+    fireEvent.focus(input);
+
+    return input;
+  };
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    setViewport(originalInnerWidth, originalInnerHeight);
+  });
+
+  test("positions its fixed menu below the control above modal surfaces", () => {
+    setViewport(1000, 800);
+    render(<EntityDropdown ariaLabel="Team" options={options} />);
+
+    openDropdownAt(makeRect(120, 200, 320, 40));
+
+    const menu: HTMLElement = screen.getByTestId("entity-dropdown-menu");
+
+    expect(menu.classList.contains("fixed")).toBe(true);
+    expect(menu.style.top).toBe("244px");
+    expect(menu.style.bottom).toBe("");
+    expect(menu.style.left).toBe("120px");
+    expect(menu.style.width).toBe("320px");
+    expect(menu.style.maxHeight).toBe("384px");
+    expect(menu.style.visibility).toBe("visible");
+    expect(menu.style.zIndex).toBe(String(DROPDOWN_MENU_Z_INDEX));
+  });
+
+  test("flips its menu above a control near the modal footer", () => {
+    setViewport(1000, 600);
+    render(<EntityDropdown ariaLabel="Team" options={options} />);
+
+    openDropdownAt(makeRect(120, 520, 320, 40));
+
+    const menu: HTMLElement = screen.getByTestId("entity-dropdown-menu");
+
+    expect(menu.style.top).toBe("");
+    expect(menu.style.bottom).toBe("84px");
+    expect(menu.style.maxHeight).toBe("384px");
+    expect(menu.style.visibility).toBe("visible");
+  });
+
+  test("selects an option from the fixed menu", () => {
+    const onChange: MockFunction = getJestMockFunction();
+    setViewport(1000, 800);
+    render(
+      <EntityDropdown ariaLabel="Team" onChange={onChange} options={options} />,
+    );
+
+    openDropdownAt(makeRect(120, 200, 320, 40));
+    fireEvent.click(screen.getByRole("option", { name: "Members" }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("members");
+    expect(screen.queryByTestId("entity-dropdown-menu")).toBeNull();
+  });
+});

package/Tests/UI/Components/Modal.test.tsx

@@ -26,6 +26,148 @@ describe("Modal", () => {
     expect(getByText("Modal content")).toBeInTheDocument();
   });
 
+  it("renders an accessible elevated dialog shell", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const { getByTestId } = render(
+      <Modal
+        title="Accessible Modal"
+        description="A concise description"
+        onClose={onCloseMock}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const modal: HTMLElement = getByTestId("modal");
+    const title: HTMLElement = getByTestId("modal-title");
+    const description: HTMLElement = getByTestId("modal-description");
+    const closeButton: HTMLElement = getByTestId("close-button");
+
+    expect(modal).toHaveAttribute("role", "dialog");
+    expect(modal).toHaveAttribute("aria-modal", "true");
+    expect(modal).toHaveAttribute("aria-labelledby", title.id);
+    expect(modal).toHaveAttribute("aria-describedby", description.id);
+    expect(modal).toHaveClass("rounded-t-2xl", "shadow-2xl");
+    expect(getByTestId("modal-backdrop")).toHaveClass(
+      "bg-gray-950/45",
+      "backdrop-blur-[2px]",
+    );
+    expect(closeButton).toHaveClass("inline-flex");
+    expect(closeButton).not.toHaveClass("md:hidden");
+  });
+
+  it("keeps keyboard focus inside the modal", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const onSubmitMock: MockFunction = getJestMockFunction();
+    const { getByLabelText, getByTestId } = render(
+      <Modal title="Focus Modal" onClose={onCloseMock} onSubmit={onSubmitMock}>
+        <input aria-label="Modal input" />
+      </Modal>,
+    );
+
+    const input: HTMLElement = getByLabelText("Modal input");
+    const headerCloseButton: HTMLElement = getByTestId("close-button");
+    const submitButton: HTMLElement = getByTestId("modal-footer-submit-button");
+
+    expect(input).toHaveFocus();
+
+    submitButton.focus();
+    fireEvent.keyDown(document, { key: "Tab" });
+    expect(headerCloseButton).toHaveFocus();
+
+    fireEvent.keyDown(document, { key: "Tab", shiftKey: true });
+    expect(submitButton).toHaveFocus();
+  });
+
+  it("closes only the topmost modal and restores focus to its opener", () => {
+    const onParentCloseMock: MockFunction = getJestMockFunction();
+    const onChildCloseMock: MockFunction = getJestMockFunction();
+    const onChildSubmitMock: MockFunction = getJestMockFunction();
+
+    const NestedModalFixture: React.FunctionComponent =
+      (): React.ReactElement => {
+        const [isChildOpen, setIsChildOpen] = React.useState<boolean>(false);
+
+        return (
+          <Modal title="Parent Modal" onClose={onParentCloseMock}>
+            <>
+              <button
+                type="button"
+                onClick={() => {
+                  setIsChildOpen(true);
+                }}
+              >
+                Open child
+              </button>
+              {isChildOpen && (
+                <Modal
+                  title="Child Modal"
+                  onSubmit={onChildSubmitMock}
+                  onClose={() => {
+                    onChildCloseMock();
+                    setIsChildOpen(false);
+                  }}
+                >
+                  <div>Child content</div>
+                </Modal>
+              )}
+            </>
+          </Modal>
+        );
+      };
+
+    const { getByRole } = render(<NestedModalFixture />);
+    const childOpener: HTMLElement = getByRole("button", {
+      name: "Open child",
+    });
+
+    fireEvent.click(childOpener);
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(onChildCloseMock).toHaveBeenCalledTimes(1);
+    expect(onParentCloseMock).not.toHaveBeenCalled();
+    expect(childOpener).toHaveFocus();
+  });
+
+  it("restores focus when a modal contains an auto-focused field", () => {
+    const opener: HTMLButtonElement = document.createElement("button");
+    document.body.appendChild(opener);
+    opener.focus();
+
+    const { getByLabelText, unmount } = render(
+      <Modal title="Auto Focus Modal">
+        <input aria-label="Auto-focused input" autoFocus />
+      </Modal>,
+    );
+
+    expect(getByLabelText("Auto-focused input")).toHaveFocus();
+
+    unmount();
+    expect(opener).toHaveFocus();
+    opener.remove();
+  });
+
+  it("renders the footer only when it has content", () => {
+    const { queryByTestId, rerender } = render(
+      <Modal title="No Actions Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(queryByTestId("modal-footer")).not.toBeInTheDocument();
+
+    rerender(
+      <Modal
+        title="Utility Action Modal"
+        leftFooterElement={<button type="button">Utility action</button>}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(queryByTestId("modal-footer")).toBeInTheDocument();
+  });
+
   it("closes the modal when the close button is clicked", () => {
     const onCloseMock: MockFunction = getJestMockFunction();
     const onSubmit: MockFunction = getJestMockFunction();
@@ -72,7 +214,7 @@ describe("Modal", () => {
       </Modal>,
     );
 
-    expect(getByTestId("modal")).toHaveClass("md:max-w-lg");
+    expect(getByTestId("modal")).toHaveClass("sm:max-w-lg", "md:max-w-lg");
   });
 
   it("displays the modal with the correct width when modalWidth is set", () => {
@@ -88,7 +230,7 @@ describe("Modal", () => {
       </Modal>,
     );
 
-    expect(getByTestId("modal")).toHaveClass("md:max-w-3xl");
+    expect(getByTestId("modal")).toHaveClass("sm:max-w-3xl", "md:max-w-3xl");
   });
 
   it("displays the children passed to the modal", () => {