@oneuptime/common 12.0.9 → 12.0.11

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

@@ -0,0 +1,343 @@
+import SavedViewsDropdown, {
+  SavedViewsDropdownProps,
+} from "../../../UI/Components/TelemetryViewer/components/SavedViewsDropdown";
+import { SavedViewOption } from "../../../UI/Components/TelemetryViewer/types";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  RenderResult,
+} from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * Applying a saved view used to be a one-way door. The dropdown drew a
+ * checkmark next to the active view, but clicking that row just re-applied it
+ * and there was no other control that meant "none" — so anyone who picked a
+ * view on the Traces explorer was stuck inside it for the rest of the session
+ * (github.com/OneUptime/oneuptime/issues/3189).
+ *
+ * Two affordances undo it, and both are pinned here: the checkmark behaves
+ * like the checkbox it looks like, and an explicit "Clear view" row spells the
+ * same thing out for anyone who never thinks to click a selected item twice.
+ *
+ * Nothing about deselection is allowed to leak into hosts that do not support
+ * it — a dropdown rendered without onClear must behave exactly as it did
+ * before, which the back-compat block below holds to.
+ */
+
+const VIEWS: Array<SavedViewOption> = [
+  { id: "wb-ims", name: "WB - IMS" },
+  { id: "checkout", name: "Errors in checkout", isDefault: true },
+];
+
+const CLEAR_LABEL: string = "Clear view";
+// Only ever rendered inside the open panel, so it doubles as an "is open" probe.
+const MENU_PROBE: string = "+ Save Current View";
+
+interface Handlers {
+  onSelect: (viewId: string) => void;
+  onClear: () => void;
+  onCreate: () => void;
+  onEdit: (viewId: string) => void;
+  onDelete: (viewId: string) => void;
+  onUpdateCurrent: () => void;
+}
+
+function makeHandlers(): Handlers {
+  return {
+    onSelect: jest.fn(),
+    onClear: jest.fn(),
+    onCreate: jest.fn(),
+    onEdit: jest.fn(),
+    onDelete: jest.fn(),
+    onUpdateCurrent: jest.fn(),
+  };
+}
+
+function renderDropdown(
+  overrides: Partial<SavedViewsDropdownProps> = {},
+  handlers: Handlers = makeHandlers(),
+): { handlers: Handlers; result: RenderResult } {
+  const props: SavedViewsDropdownProps = {
+    savedViews: VIEWS,
+    selectedSavedViewId: null,
+    ...handlers,
+    ...overrides,
+  };
+
+  return { handlers, result: render(<SavedViewsDropdown {...props} />) };
+}
+
+function rerenderDropdown(
+  result: RenderResult,
+  handlers: Handlers,
+  overrides: Partial<SavedViewsDropdownProps>,
+): void {
+  const props: SavedViewsDropdownProps = {
+    savedViews: VIEWS,
+    selectedSavedViewId: null,
+    ...handlers,
+    ...overrides,
+  };
+
+  result.rerender(<SavedViewsDropdown {...props} />);
+}
+
+function trigger(): HTMLElement {
+  return screen.getAllByRole("button")[0]!;
+}
+
+function openMenu(): void {
+  fireEvent.click(trigger());
+}
+
+function isMenuOpen(): boolean {
+  return screen.queryByText(MENU_PROBE) !== null;
+}
+
+function rowFor(name: string): HTMLElement {
+  return screen.getByRole("button", { name: name });
+}
+
+describe("SavedViewsDropdown — clearing the applied view", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("clicking the applied view clears it instead of re-applying it", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(rowFor("WB - IMS"));
+
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    // Re-applying what is already applied is the behaviour being replaced.
+    expect(handlers.onSelect).not.toHaveBeenCalled();
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  test("the explicit Clear view row clears and closes the menu", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(rowFor(CLEAR_LABEL));
+
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).not.toHaveBeenCalled();
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  test("the Clear view row is offered only while a view is applied", () => {
+    const { handlers, result } = renderDropdown({ selectedSavedViewId: null });
+
+    openMenu();
+    // Nothing is applied, so there is nothing the row could undo.
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+
+    rerenderDropdown(result, handlers, { selectedSavedViewId: "checkout" });
+
+    expect(screen.getByText(CLEAR_LABEL)).toBeInTheDocument();
+  });
+
+  test("a selection pointing at a view that no longer exists offers no clear row", () => {
+    /*
+     * The host nulls a stale id in an effect, so for one render the dropdown
+     * holds an id matching nothing. Offering "Clear view" then would be a
+     * button that undoes a view the user cannot see.
+     */
+    renderDropdown({ selectedSavedViewId: "deleted-view" });
+
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+
+  test("clicking a different view still applies it", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(rowFor("Errors in checkout (default)"));
+
+    expect(handlers.onSelect).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).toHaveBeenCalledWith("checkout");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  test("the trigger drops back to the generic label once the view is cleared", () => {
+    const { handlers, result } = renderDropdown({
+      selectedSavedViewId: "wb-ims",
+    });
+
+    expect(trigger()).toHaveTextContent("WB - IMS");
+
+    // What the host renders after onClear runs.
+    rerenderDropdown(result, handlers, { selectedSavedViewId: null });
+
+    expect(trigger()).toHaveTextContent("Saved Views");
+    expect(trigger()).not.toHaveTextContent("WB - IMS");
+  });
+
+  test("the cleared menu has nothing left to clear", () => {
+    const { handlers, result } = renderDropdown({
+      selectedSavedViewId: "wb-ims",
+    });
+
+    openMenu();
+    fireEvent.click(rowFor(CLEAR_LABEL));
+
+    rerenderDropdown(result, handlers, { selectedSavedViewId: null });
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    // Every row is now selectable again rather than being a toggle-off.
+    expect(rowFor("WB - IMS")).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("clearing then picking the same view again re-applies it", () => {
+    const { handlers, result } = renderDropdown({
+      selectedSavedViewId: "wb-ims",
+    });
+
+    openMenu();
+    fireEvent.click(rowFor("WB - IMS"));
+
+    rerenderDropdown(result, handlers, { selectedSavedViewId: null });
+    openMenu();
+    fireEvent.click(rowFor("WB - IMS"));
+
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).toHaveBeenCalledWith("wb-ims");
+  });
+});
+
+describe("SavedViewsDropdown — the row reports its own state", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("aria-pressed tracks which view is applied", () => {
+    renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+
+    expect(rowFor("WB - IMS")).toHaveAttribute("aria-pressed", "true");
+    expect(rowFor("Errors in checkout (default)")).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+  });
+
+  test("the accessible name is the view name, not the checkmark glyph", () => {
+    renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+
+    // "✓ WB - IMS" would be the computed name if the glyph leaked into it.
+    expect(rowFor("WB - IMS")).toBeInTheDocument();
+  });
+
+  test("the default badge is announced as a word, not dropped", () => {
+    /*
+     * The badge is inside the button, so an aria-label of just the view name
+     * would hide "default" from a screen reader while sighted users see it.
+     */
+    renderDropdown({ selectedSavedViewId: null });
+
+    openMenu();
+
+    expect(rowFor("Errors in checkout (default)")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Errors in checkout" }),
+    ).toBeNull();
+  });
+});
+
+describe("SavedViewsDropdown — hosts that do not support clearing", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("no Clear view row is rendered without onClear", () => {
+    renderDropdown({ selectedSavedViewId: "wb-ims", onClear: undefined });
+
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+
+  test("clicking the applied view falls back to re-applying it", () => {
+    const { handlers } = renderDropdown({
+      selectedSavedViewId: "wb-ims",
+      onClear: undefined,
+    });
+
+    openMenu();
+    fireEvent.click(rowFor("WB - IMS"));
+
+    expect(handlers.onSelect).toHaveBeenCalledWith("wb-ims");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+});
+
+describe("SavedViewsDropdown — the rest of the menu is unaffected", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("Edit on the applied row edits and does not clear", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]!);
+
+    expect(handlers.onEdit).toHaveBeenCalledWith("wb-ims");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+    expect(handlers.onSelect).not.toHaveBeenCalled();
+  });
+
+  test("Delete on the applied row deletes and does not clear", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+
+    expect(handlers.onDelete).toHaveBeenCalledWith("wb-ims");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+
+  test("Update on the applied row saves over it and does not clear", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(rowFor("Update"));
+
+    expect(handlers.onUpdateCurrent).toHaveBeenCalledTimes(1);
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+
+  test("Save Current View still creates and does not clear", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "wb-ims" });
+
+    openMenu();
+    fireEvent.click(rowFor(MENU_PROBE));
+
+    expect(handlers.onCreate).toHaveBeenCalledTimes(1);
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+
+  test("an empty view list still renders its empty state and no clear row", () => {
+    renderDropdown({ savedViews: [], selectedSavedViewId: null });
+
+    openMenu();
+
+    expect(screen.getByText("No saved views yet.")).toBeInTheDocument();
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+});

package/Tests/UI/Components/Workflow/ColumnEditor/ColumnControl.test.ts

@@ -0,0 +1,289 @@
+/*
+ * Which control a column gets, and what values that control can hold without
+ * changing them.
+ *
+ * Every `type` here is a TableColumnType *value*, because that is what the
+ * /model-schema endpoint puts on the wire. Several values differ sharply from
+ * the member name that reads like the obvious literal — ShortText is "Text",
+ * ObjectID is "Object ID", LongURL is "URL", JavaScript is "JavaSCript" — and
+ * a mapping written against the names would classify the two most-declared
+ * column types as unknown while every test still passed.
+ */
+
+import TableColumnType from "../../../../../Types/Database/TableColumnType";
+import {
+  columnTypeLabel,
+  controlForColumn,
+  isOfferableColumn,
+  literalFitsControl,
+} from "../../../../../UI/Components/Workflow/ColumnEditor/ColumnControl";
+import { ModelColumnControl } from "../../../../../UI/Components/Workflow/ColumnEditor/ColumnRow";
+import { ModelSchemaColumn } from "../../../../../UI/Components/Workflow/ModelSchema";
+import { describe, expect, test } from "@jest/globals";
+
+type MakeColumnFunction = (
+  overrides: Partial<ModelSchemaColumn>,
+) => ModelSchemaColumn;
+
+const makeColumn: MakeColumnFunction = (
+  overrides: Partial<ModelSchemaColumn>,
+): ModelSchemaColumn => {
+  return {
+    id: "name",
+    title: "Name",
+    type: TableColumnType.ShortText,
+    isRelation: false,
+    ...overrides,
+  };
+};
+
+describe("controlForColumn — totality", () => {
+  test("every column type the database can declare gets a control", () => {
+    const allTypes: Array<string> = Object.values(TableColumnType);
+
+    // Guards against the enum growing and a new type silently becoming a text box.
+    expect(allTypes.length).toBeGreaterThan(0);
+
+    for (const type of allTypes) {
+      const control: ModelColumnControl = controlForColumn(
+        makeColumn({ type: type }),
+      );
+
+      expect(Object.values(ModelColumnControl)).toContain(control);
+    }
+  });
+
+  test("a column the schema does not describe still gets a usable control", () => {
+    /*
+     * The runner accepts column names this endpoint never surfaces, so an
+     * unknown key is typed as text rather than locked as unsupported.
+     */
+    expect(controlForColumn(undefined)).toBe(ModelColumnControl.Text);
+  });
+});
+
+describe("controlForColumn — the wire values, not the member names", () => {
+  test('ShortText, whose value is "Text", is a text box', () => {
+    expect(
+      controlForColumn(makeColumn({ type: TableColumnType.ShortText })),
+    ).toBe(ModelColumnControl.Text);
+    expect(TableColumnType.ShortText).toBe("Text");
+  });
+
+  test('ObjectID, whose value is "Object ID", is an ID box', () => {
+    expect(
+      controlForColumn(makeColumn({ type: TableColumnType.ObjectID })),
+    ).toBe(ModelColumnControl.ObjectId);
+    expect(TableColumnType.ObjectID).toBe("Object ID");
+  });
+
+  test('LongURL, whose value is "URL", is a text box', () => {
+    expect(
+      controlForColumn(makeColumn({ type: TableColumnType.LongURL })),
+    ).toBe(ModelColumnControl.Text);
+    expect(TableColumnType.LongURL).toBe("URL");
+  });
+
+  test("JavaScript, whose value carries a capital S typo, is long text", () => {
+    expect(
+      controlForColumn(makeColumn({ type: TableColumnType.JavaScript })),
+    ).toBe(ModelColumnControl.LongText);
+    expect(TableColumnType.JavaScript).toBe("JavaSCript");
+  });
+
+  test("every numeric flavour is a number box", () => {
+    const numericTypes: Array<string> = [
+      TableColumnType.Number,
+      TableColumnType.SmallNumber,
+      TableColumnType.BigNumber,
+      TableColumnType.PositiveNumber,
+      TableColumnType.SmallPositiveNumber,
+      TableColumnType.BigPositiveNumber,
+      TableColumnType.Port,
+    ];
+
+    for (const type of numericTypes) {
+      expect(controlForColumn(makeColumn({ type: type }))).toBe(
+        ModelColumnControl.Number,
+      );
+    }
+  });
+
+  test("boolean, date and color each get their own control", () => {
+    expect(
+      controlForColumn(makeColumn({ type: TableColumnType.Boolean })),
+    ).toBe(ModelColumnControl.Boolean);
+    expect(controlForColumn(makeColumn({ type: TableColumnType.Date }))).toBe(
+      ModelColumnControl.Date,
+    );
+    expect(controlForColumn(makeColumn({ type: TableColumnType.Color }))).toBe(
+      ModelColumnControl.Color,
+    );
+  });
+
+  test("the long-form text types share one textarea", () => {
+    const longTypes: Array<string> = [
+      TableColumnType.LongText,
+      TableColumnType.VeryLongText,
+      TableColumnType.Description,
+      TableColumnType.Markdown,
+      TableColumnType.HTML,
+      TableColumnType.CSS,
+    ];
+
+    for (const type of longTypes) {
+      expect(controlForColumn(makeColumn({ type: type }))).toBe(
+        ModelColumnControl.LongText,
+      );
+    }
+  });
+
+  test("blobs, nested structures and relations have no row that could hold them", () => {
+    const unsupportedTypes: Array<string> = [
+      TableColumnType.Entity,
+      TableColumnType.EntityArray,
+      TableColumnType.JSON,
+      TableColumnType.Array,
+      TableColumnType.Buffer,
+      TableColumnType.File,
+      TableColumnType.MonitorSteps,
+    ];
+
+    for (const type of unsupportedTypes) {
+      expect(controlForColumn(makeColumn({ type: type }))).toBe(
+        ModelColumnControl.Unsupported,
+      );
+    }
+  });
+
+  test("a relation is unsupported whatever its declared type says", () => {
+    expect(
+      controlForColumn(
+        makeColumn({ type: TableColumnType.ShortText, isRelation: true }),
+      ),
+    ).toBe(ModelColumnControl.Unsupported);
+  });
+
+  test("a single-value enum column is a text box, not a blob", () => {
+    /*
+     * Permission, MonitorType, WorkflowStatus and CustomFieldType are stored as
+     * short text with one enum value in them - TeamPermission.permission ships
+     * example: "ProjectOwner".
+     */
+    const enumTypes: Array<string> = [
+      TableColumnType.Permission,
+      TableColumnType.MonitorType,
+      TableColumnType.WorkflowStatus,
+      TableColumnType.CustomFieldType,
+    ];
+
+    for (const type of enumTypes) {
+      expect(controlForColumn(makeColumn({ type: type }))).toBe(
+        ModelColumnControl.Text,
+      );
+    }
+  });
+});
+
+describe("literalFitsControl", () => {
+  test("an untouched value fits every control", () => {
+    for (const control of Object.values(ModelColumnControl)) {
+      expect(literalFitsControl(control, "")).toBe(true);
+      expect(literalFitsControl(control, undefined)).toBe(true);
+    }
+  });
+
+  test("null does not fit, because an empty box cannot say null", () => {
+    /*
+     * This is the whole reason stored nulls survive a round trip: an empty
+     * control emits "", which a record drops, so a null has to be kept raw.
+     */
+    expect(literalFitsControl(ModelColumnControl.Text, null)).toBe(false);
+    expect(literalFitsControl(ModelColumnControl.Number, null)).toBe(false);
+  });
+
+  test("a number fits a number box and the string spelling of one does not", () => {
+    expect(literalFitsControl(ModelColumnControl.Number, 8080)).toBe(true);
+    expect(literalFitsControl(ModelColumnControl.Number, "8080")).toBe(false);
+    expect(literalFitsControl(ModelColumnControl.Number, "08080")).toBe(false);
+    expect(literalFitsControl(ModelColumnControl.Number, NaN)).toBe(false);
+  });
+
+  test("a boolean fits a boolean control and its string spelling does not", () => {
+    expect(literalFitsControl(ModelColumnControl.Boolean, true)).toBe(true);
+    expect(literalFitsControl(ModelColumnControl.Boolean, false)).toBe(true);
+    expect(literalFitsControl(ModelColumnControl.Boolean, "true")).toBe(false);
+  });
+
+  test("a date fits only as a parseable string", () => {
+    expect(
+      literalFitsControl(ModelColumnControl.Date, "2026-08-15T00:00:00.000Z"),
+    ).toBe(true);
+    expect(literalFitsControl(ModelColumnControl.Date, "not a date")).toBe(
+      false,
+    );
+    expect(literalFitsControl(ModelColumnControl.Date, 1786818975367)).toBe(
+      false,
+    );
+  });
+
+  test("a text control takes strings and nothing else", () => {
+    expect(literalFitsControl(ModelColumnControl.Text, "hello")).toBe(true);
+    expect(literalFitsControl(ModelColumnControl.Text, 12)).toBe(false);
+    expect(literalFitsControl(ModelColumnControl.Text, true)).toBe(false);
+  });
+});
+
+describe("isOfferableColumn", () => {
+  test("an ordinary scalar column is offered", () => {
+    expect(isOfferableColumn(makeColumn({}))).toBe(true);
+  });
+
+  test("a relation is not offered — its scalar ID sibling is", () => {
+    expect(isOfferableColumn(makeColumn({ isRelation: true }))).toBe(false);
+  });
+
+  test("the project column is not offered, because the runner stamps it", () => {
+    expect(isOfferableColumn(makeColumn({ isTenantColumn: true }))).toBe(false);
+  });
+
+  test("a column no row can hold is not offered", () => {
+    expect(
+      isOfferableColumn(makeColumn({ type: TableColumnType.MonitorSteps })),
+    ).toBe(false);
+  });
+});
+
+describe("columnTypeLabel", () => {
+  test("says what kind of value the field wants, in words", () => {
+    expect(columnTypeLabel(makeColumn({ type: TableColumnType.Boolean }))).toBe(
+      "True or false",
+    );
+    expect(columnTypeLabel(makeColumn({ type: TableColumnType.Date }))).toBe(
+      "Date and time",
+    );
+    expect(
+      columnTypeLabel(makeColumn({ type: TableColumnType.ObjectID })),
+    ).toBe("ID");
+    expect(columnTypeLabel(makeColumn({ type: TableColumnType.Port }))).toBe(
+      "Number",
+    );
+    expect(
+      columnTypeLabel(makeColumn({ type: TableColumnType.ShortText })),
+    ).toBe("Text");
+  });
+
+  test("a relation says so rather than naming its inner type", () => {
+    expect(columnTypeLabel(makeColumn({ isRelation: true }))).toBe("Relation");
+  });
+
+  test("an unsupported column names its raw type, which is what has to be written by hand", () => {
+    expect(
+      columnTypeLabel(makeColumn({ type: TableColumnType.MonitorSteps })),
+    ).toBe(TableColumnType.MonitorSteps);
+  });
+
+  test("an unknown column is labelled unknown rather than guessed at", () => {
+    expect(columnTypeLabel(undefined)).toBe("Unknown");
+  });
+});