@oneuptime/common 13.0.1 → 13.0.4

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

@@ -6,28 +6,10 @@ import { render } from "@testing-library/react";
 import React from "react";
 
 /*
- * WHY THIS FILE EXISTS
- *
- * Every icon in Icon.tsx is hand-written path data in one long if/else chain,
- * and they all share a 24x24 viewBox. The viewBox is not what the eye
- * measures, though - the INK is. An icon whose drawing runs corner to corner
- * reads as bigger than one that sits inside a keyline square, at the same
- * nominal size, on the same row, in the same button.
- *
- * That is what happened to the pencil. Heroicons' pencil is a single unbroken
- * diagonal spanning the full box, so its ink ran ~25 units tip to eraser
- * while the Trash and List it sits beside in a table row's action buttons run
- * ~20. Rendered by Button at 20px (Button.tsx pins the icon to `w-5 h-5`), the
- * pencil drew a stroke longer than the box it was sized into, and looked a
- * size larger than every button next to it (OneUptime issue #3444's
- * screenshot).
- *
- * A path string pinned by equality would catch a revert and nothing else - it
- * says nothing about WHY the string is what it is, and it goes stale the
- * moment anyone redraws the glyph for an unrelated reason. So this measures
- * the geometry instead: the pencil's ink must stay in the same size class as
- * the icons it is rendered beside. Redraw the pencil however you like; it just
- * may not go back to overshooting its neighbours.
+ * Edit and Pencil share a diagonal glyph. A uniform reduction made the old
+ * pencil shorter but also left a thin barrel that disappeared at button size.
+ * These geometry checks protect both dimensions: a compact outline and enough
+ * width to remain legible, without tying future redraws to an exact path.
  */
 
 /*
@@ -59,13 +41,10 @@ interface Point {
  * The vertices of an SVG path: every on-path point the path data names, in
  * user units.
  *
- * Deliberately vertices and not a true outline. Curves and arcs bulge past
- * their endpoints - the pencil's eraser cap is a semicircle that reaches
- * ~0.4 units beyond its own arc endpoint - so this under-measures every icon
- * by a fraction of a unit. That is fine and it is why the comparison below is
- * relative: every icon is measured the same way, so the bias cancels, and the
- * question being asked ("is the pencil in the same size class as the trash
- * can") is not sensitive to a rounding of a stroke width.
+ * Deliberately vertices and not a true outline. Curves and arcs extend past
+ * their endpoints, especially the pencil's rounded cap. These measurements
+ * protect proportions in the path data; browser checks cover the rendered
+ * outline and alignment. Bounds below allow for the cap being omitted here.
  *
  * Control points of curves are skipped rather than treated as vertices: they
  * routinely sit outside the drawn shape and would report ink that is not
@@ -258,6 +237,24 @@ const measurePath: MeasurePathFunction = (pathData: string): number => {
   return longestSpan(parsePathVertices(pathData));
 };
 
+/*
+ * Project onto the axis perpendicular to the pencil's 45-degree barrel.
+ * Its axis-aligned bounding box cannot distinguish a wide pencil from a line.
+ */
+type DiagonalWidthFunction = (vertices: Array<Point>) => number;
+
+const diagonalWidth: DiagonalWidthFunction = (
+  vertices: Array<Point>,
+): number => {
+  const transverseCoordinates: Array<number> = vertices.map((point: Point) => {
+    return (point.x + point.y) / Math.SQRT2;
+  });
+
+  return (
+    Math.max(...transverseCoordinates) - Math.min(...transverseCoordinates)
+  );
+};
+
 // The same measurement, for an icon rendered by the component under test.
 type InkExtentFunction = (icon: IconProp) => number;
 
@@ -282,6 +279,13 @@ const inkExtent: InkExtentFunction = (icon: IconProp): number => {
 const OVERSIZED_HEROICONS_PENCIL: string =
   "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125";
 
+/*
+ * The previous 80% pencil had an approximately three-unit barrel. Keeping it
+ * as a control proves that length checks alone do not prevent this regression.
+ */
+const NARROW_PENCIL: string =
+  "M15.89 5.99l1.35-1.35a1.5 1.5 0 112.122 2.122L7.866 18.256a3.6 3.6 0 01-1.518.904l-2.148.64.64-2.148a3.6 3.6 0 01.904-1.518L15.89 5.99zm0 0L18 8.1";
+
 describe("path measurement", () => {
   /*
    * Every assertion in the suite below is only as good as the parser, and a
@@ -297,6 +301,14 @@ describe("path measurement", () => {
     expect(measurePath("M12 4.5v15m7.5-7.5h-15")).toBeCloseTo(15, 2);
   });
 
+  it("measures width perpendicular to a diagonal instead of its bounding box", () => {
+    const diagonal: Array<Point> = parsePathVertices("M0 8L8 0");
+    const wideDiagonal: Array<Point> = parsePathVertices("M0 4L4 0L8 4L4 8Z");
+
+    expect(diagonalWidth(diagonal)).toBeCloseTo(0, 6);
+    expect(diagonalWidth(wideDiagonal)).toBeCloseTo(4 * Math.SQRT2, 6);
+  });
+
   it("reads arc flags that are packed against their coordinates", () => {
     /*
      * "a1.875 1.875 0 112.652 2.652" is large-arc=1, sweep=1, dx=2.652 - not
@@ -330,8 +342,11 @@ describe("Icon optical size", () => {
      */
     expect(pencil).toBeLessThanOrEqual(trash * 1.05);
 
-    // And not shrunk into a different size class either.
-    expect(pencil).toBeGreaterThanOrEqual(list * 0.9);
+    /*
+     * A compact pencil still needs to be legible. Its rounded cap extends
+     * past these vertices, so allow more inset than for an upright glyph.
+     */
+    expect(pencil).toBeGreaterThanOrEqual(list * 0.8);
   });
 
   it("would fail for the stock Heroicons pencil", () => {
@@ -342,6 +357,39 @@ describe("Icon optical size", () => {
     expect(stock).toBeGreaterThan(trash * 1.2);
   });
 
+  it.each([IconProp.Pencil, IconProp.Edit])(
+    "%s has a wider barrel and a shorter outline than the previous pencil",
+    (icon: IconProp) => {
+      const vertices: Array<Point> = getIconPaths(icon).flatMap(
+        (pathData: string) => {
+          return parsePathVertices(pathData);
+        },
+      );
+      const width: number = diagonalWidth(vertices);
+      const length: number = longestSpan(vertices);
+
+      /*
+       * At 20px, this leaves a visible barrel interior even after the 1.5-unit
+       * outline is drawn. A width ceiling preserves the familiar pencil shape.
+       */
+      expect(width).toBeGreaterThanOrEqual(4.5);
+      expect(width).toBeLessThanOrEqual(6.5);
+      expect(length / width).toBeGreaterThanOrEqual(2.5);
+      expect(length / width).toBeLessThanOrEqual(4);
+      expect(length).toBeLessThanOrEqual(measurePath(NARROW_PENCIL) * 0.85);
+    },
+  );
+
+  it("rejects the previous narrow pencil even though it passed the size checks", () => {
+    const vertices: Array<Point> = parsePathVertices(NARROW_PENCIL);
+    const width: number = diagonalWidth(vertices);
+    const length: number = longestSpan(vertices);
+
+    expect(length).toBeLessThanOrEqual(inkExtent(IconProp.Trash) * 1.05);
+    expect(width).toBeLessThan(4.5);
+    expect(length / width).toBeGreaterThan(4);
+  });
+
   it("draws the same pencil for Pencil and Edit", () => {
     /*
      * Both names route to one branch in Icon.tsx, and a good deal of the

package/Tests/UI/Components/ModelTable/ModelTableWrapContent.test.tsx

@@ -221,8 +221,8 @@ const makeColumns: MakeColumnsFunction = (): Columns<Monitor> => {
       },
     },
     /*
-     * A wrapping column that names its own, wider cap. This is the shape
-     * ExceptionsTable.tsx's "Exception Message" column was migrated to.
+     * A wrapping column that names its own, wider cap. This mirrors the shape
+     * the legacy exception table's "Exception Message" column used.
      */
     {
       field: { monitorType: true },
@@ -433,11 +433,11 @@ describe("ModelTable column wrapping options (OneUptime issue #3585)", () => {
 
     /*
      * `wrapMaxWidthClassName` is the second of the two fields riding the
-     * BaseModelTable spread, and the one ExceptionsTable.tsx depends on: its
-     * "Exception Message" column was migrated from a hand-spelled
+     * BaseModelTable spread, and the exception-message use case depends on it.
+     * The fixture mirrors a column migrated from a hand-spelled
      * "max-w-3xl whitespace-normal break-words" contentClassName onto these
-     * options, so if this field stops making the hop that table silently
-     * loses its width cap.
+     * options, so if this field stops making the hop the cell silently loses
+     * its width cap.
      */
     test("uses wrapMaxWidthClassName on the wrapper when the column names one", async () => {
       renderTable();

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

@@ -1,16 +1,19 @@
 import Navbar, {
   ComponentProps,
+  MoreMenuItem,
   NavItem,
 } from "../../../UI/Components/Navbar/NavBar";
-import { describe, expect, it, beforeEach } from "@jest/globals";
+import { afterEach, beforeEach, describe, expect, it } from "@jest/globals";
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 import React from "react";
 import Route from "../../../Types/API/Route";
 import IconProp from "../../../Types/Icon/IconProp";
 import Navigation from "../../../UI/Utils/Navigation";
 import { Location } from "react-router-dom";
 
+const ORIGINAL_INNER_WIDTH: number = window.innerWidth;
+
 describe("Navbar", () => {
   // Mock Navigation location for Navigation utility
   beforeEach(() => {
@@ -23,6 +26,15 @@ describe("Navbar", () => {
     };
     Navigation.setLocation(mockLocation);
   });
+
+  afterEach(() => {
+    cleanup();
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: ORIGINAL_INNER_WIDTH,
+    });
+  });
   const defaultProps: ComponentProps = {
     children: <div>Test</div>,
   };
@@ -63,4 +75,81 @@ describe("Navbar", () => {
     expect(screen.getByText("Child 1")).toBeInTheDocument();
     expect(screen.getByText("Child 2")).toBeInTheDocument();
   });
+
+  it("uses a product's section-wide active route in the mobile selector", () => {
+    const projectId: string = "10000000-0000-4000-8000-000000000001";
+    const path: string = `/dashboard/${projectId}/exceptions/overview`;
+
+    Navigation.setLocation({
+      pathname: path,
+      search: "",
+      hash: "",
+      state: null,
+      key: "test",
+    } as Location);
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 375,
+    });
+
+    const home: NavItem = {
+      id: "home-nav-bar-item",
+      title: "Home",
+      icon: IconProp.Home,
+      route: new Route(`/dashboard/${projectId}/home`),
+    };
+    const exceptions: MoreMenuItem = {
+      title: "Exceptions",
+      description: "Investigate application exceptions.",
+      icon: IconProp.Bug,
+      route: new Route(`/dashboard/${projectId}/exceptions/unresolved`),
+      activeRoute: new Route("/dashboard/:projectId/exceptions"),
+    };
+
+    render(<Navbar items={[home]} moreMenuItems={[exceptions]} />);
+
+    expect(screen.getByTestId("mobile-nav-toggle")).toBeInTheDocument();
+    expect(screen.getByText("Exceptions")).toBeInTheDocument();
+    expect(screen.queryByText("Home")).not.toBeInTheDocument();
+  });
+
+  it("uses a product's section-wide active route in the desktop selector", () => {
+    const projectId: string = "10000000-0000-4000-8000-000000000001";
+    const path: string = `/dashboard/${projectId}/exceptions/overview`;
+
+    Navigation.setLocation({
+      pathname: path,
+      search: "",
+      hash: "",
+      state: null,
+      key: "test",
+    } as Location);
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1024,
+    });
+
+    const home: NavItem = {
+      id: "home-nav-bar-item",
+      title: "Home",
+      icon: IconProp.Home,
+      route: new Route(`/dashboard/${projectId}/home`),
+    };
+    const exceptions: MoreMenuItem = {
+      title: "Exceptions",
+      description: "Investigate application exceptions.",
+      icon: IconProp.Bug,
+      route: new Route(`/dashboard/${projectId}/exceptions/unresolved`),
+      activeRoute: new Route("/dashboard/:projectId/exceptions"),
+    };
+
+    render(<Navbar items={[home]} moreMenuItems={[exceptions]} />);
+
+    expect(screen.queryByTestId("mobile-nav-toggle")).not.toBeInTheDocument();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Exceptions")).toBeInTheDocument();
+    expect(screen.queryByText("Products")).not.toBeInTheDocument();
+  });
 });

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

@@ -0,0 +1,211 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import Button, {
+  ButtonSize,
+  ButtonStyleType,
+} from "../../../UI/Components/Button/Button";
+import { describe, expect, it, jest } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+const BUTTON_STYLES: Array<[string, ButtonStyleType]> = Object.keys(
+  ButtonStyleType,
+)
+  .filter((key: string) => {
+    return isNaN(Number(key));
+  })
+  .map((key: string) => {
+    return [key, ButtonStyleType[key as keyof typeof ButtonStyleType]] as [
+      string,
+      ButtonStyleType,
+    ];
+  });
+
+const BUTTON_SIZES: Array<[string, ButtonSize]> = [
+  ["extra small", ButtonSize.ExtraSmall],
+  ["small", ButtonSize.Small],
+  ["normal", ButtonSize.Normal],
+  ["large", ButtonSize.Large],
+];
+
+/*
+ * Render the real Button -> Icon stack. The glyph's proportions are covered
+ * by IconOpticalSize; these checks protect the space and alignment around it
+ * and the edit action that users reach through each button variant.
+ */
+describe.each([IconProp.Edit, IconProp.Pencil])(
+  "%s buttons",
+  (icon: IconProp) => {
+    it.each(BUTTON_STYLES)(
+      "centers the icon and preserves its accessible name in the %s style",
+      (_name: string, buttonStyle: ButtonStyleType) => {
+        render(
+          <Button title="Edit Project" icon={icon} buttonStyle={buttonStyle} />,
+        );
+
+        const button: HTMLElement = screen.getByRole("button", {
+          name: "Edit Project",
+        });
+        const svg: SVGSVGElement | null = button.querySelector("svg");
+        const path: SVGPathElement | null = button.querySelector("path");
+
+        /*
+         * Centering matters when a mobile label has a 24px line height and the
+         * icon occupies 20px. jsdom cannot lay out these boxes; the shared class
+         * is the CSS contract also exercised by the browser regression.
+         */
+        expect(button).toHaveClass("items-center");
+        expect(button).toBeEnabled();
+        expect(svg).toHaveClass("w-5", "h-5");
+        expect(svg).toHaveAttribute("viewBox", "0 0 24 24");
+        expect(svg).toHaveAttribute("stroke-width", "1.5");
+        expect(svg).toHaveAttribute("stroke", "currentColor");
+        expect(svg).toHaveAttribute("aria-hidden", "true");
+        expect(path).toHaveAttribute("stroke-linecap", "round");
+        expect(path).toHaveAttribute("stroke-linejoin", "round");
+        expect(screen.queryByRole("img")).not.toBeInTheDocument();
+
+        if (
+          buttonStyle === ButtonStyleType.ICON ||
+          buttonStyle === ButtonStyleType.ICON_LIGHT
+        ) {
+          expect(svg).toHaveClass("m-1");
+          expect(button).toHaveAttribute("aria-label", "Edit Project");
+        } else {
+          expect(svg).toHaveClass("mr-1");
+        }
+
+        if (buttonStyle === ButtonStyleType.ICON) {
+          expect(button).not.toHaveTextContent("Edit Project");
+        } else {
+          expect(button).toHaveTextContent("Edit Project");
+        }
+      },
+    );
+
+    it.each(BUTTON_SIZES)(
+      "retains the icon footprint and padding in a %s button",
+      (_name: string, buttonSize: ButtonSize) => {
+        render(
+          <Button title="Edit Project" icon={icon} buttonSize={buttonSize} />,
+        );
+
+        const button: HTMLElement = screen.getByRole("button", {
+          name: "Edit Project",
+        });
+
+        expect(button).toHaveClass(...buttonSize.split(" "), "items-center");
+        expect(button.querySelector("svg")).toHaveClass("w-5", "h-5", "mr-1");
+      },
+    );
+
+    it.each([ButtonStyleType.NORMAL, ButtonStyleType.ICON])(
+      "invokes edit once when the pencil is clicked in style %s",
+      (buttonStyle: ButtonStyleType) => {
+        const onClick: ReturnType<typeof jest.fn> = jest.fn();
+        render(
+          <Button
+            title="Edit Project"
+            icon={icon}
+            buttonStyle={buttonStyle}
+            onClick={onClick}
+          />,
+        );
+
+        const button: HTMLElement = screen.getByRole("button", {
+          name: "Edit Project",
+        });
+        const path: SVGPathElement | null = button.querySelector("path");
+
+        expect(path).not.toBeNull();
+        fireEvent.click(path as SVGPathElement);
+        expect(onClick).toHaveBeenCalledTimes(1);
+      },
+    );
+
+    it.each([ButtonStyleType.NORMAL, ButtonStyleType.ICON])(
+      "keeps a disabled edit action inert in style %s",
+      (buttonStyle: ButtonStyleType) => {
+        const onClick: ReturnType<typeof jest.fn> = jest.fn();
+        render(
+          <Button
+            title="Edit Project"
+            icon={icon}
+            buttonStyle={buttonStyle}
+            disabled={true}
+            onClick={onClick}
+          />,
+        );
+
+        const button: HTMLElement = screen.getByRole("button", {
+          name: "Edit Project",
+        });
+        const path: SVGPathElement | null = button.querySelector("path");
+
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute("aria-disabled", "true");
+        expect(path).not.toBeNull();
+        fireEvent.click(path as SVGPathElement);
+        expect(onClick).not.toHaveBeenCalled();
+      },
+    );
+
+    it("replaces the pencil with a centered spinner while an edit action loads", () => {
+      const onClick: ReturnType<typeof jest.fn> = jest.fn();
+      const { rerender } = render(
+        <Button title="Edit Project" icon={icon} onClick={onClick} />,
+      );
+      const button: HTMLElement = screen.getByRole("button", {
+        name: "Edit Project",
+      });
+
+      expect(button.querySelector("svg")).not.toHaveClass("animate-spin");
+
+      rerender(
+        <Button
+          title="Edit Project"
+          icon={icon}
+          isLoading={true}
+          onClick={onClick}
+        />,
+      );
+
+      expect(button).toBeDisabled();
+      expect(button).toHaveClass("items-center");
+      expect(button.querySelectorAll("svg")).toHaveLength(1);
+      expect(button.querySelector("svg")).toHaveClass(
+        "animate-spin",
+        "w-5",
+        "h-5",
+      );
+      fireEvent.click(button);
+      expect(onClick).not.toHaveBeenCalled();
+
+      rerender(<Button title="Edit Project" icon={icon} onClick={onClick} />);
+
+      expect(button).toBeEnabled();
+      expect(button.querySelectorAll("svg")).toHaveLength(1);
+      expect(button.querySelector("svg")).not.toHaveClass("animate-spin");
+      fireEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("retains an explicit accessible name for an icon-only edit action", () => {
+      render(
+        <Button
+          icon={icon}
+          buttonStyle={ButtonStyleType.ICON}
+          title="Edit"
+          ariaLabel="Rename project"
+        />,
+      );
+
+      expect(
+        screen.getByRole("button", { name: "Rename project" }),
+      ).toBeEnabled();
+      expect(
+        screen.queryByRole("button", { name: "Edit" }),
+      ).not.toBeInTheDocument();
+    });
+  },
+);