@oneuptime/common 12.0.30 → 12.0.32

package/Tests/UI/Styles/ChartFocusRing.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  StyleRule,
+  declaredValue,
+  rulesFor,
+  selectorsDeclaring,
+} from "./ThemeStylesheet";
+
+/*
+ * https://github.com/OneUptime/oneuptime/issues/3528: a black box around the
+ * graphs.
+ *
+ * recharts leaves its accessibility layer on, so the root <svg> of every
+ * chart carries tabindex="0", and the annotation layer gives the same to the
+ * <g> elements it draws for event chips and highlighted windows. Chrome's SVG
+ * user-agent stylesheet rings a focused <svg> on plain :focus rather than on
+ * :focus-visible the way it treats focusable HTML, so a mouse press inside a
+ * chart -- dragging out a zoom range on the Logs and Traces volume charts,
+ * clicking an event marker -- paints a hard black rectangle over the data.
+ *
+ * The fix is four lines of CSS, which is exactly why it needs cover: nothing
+ * else in the build would notice a reformat that dropped the descendant
+ * selector, or a reorder that let the user-agent ring back in. The rules
+ * carry no !important and no extra specificity, so their contract is a
+ * cascade contract, and that is what is asserted here rather than the literal
+ * text of the file.
+ *
+ * ChartFocusRingCoverage.test.tsx holds the other half: that the selectors
+ * written here still reach the elements recharts actually renders.
+ */
+
+// The chart surface and the focusable shapes drawn inside it.
+const POINTER_FOCUS_SELECTORS: Array<string> = [
+  ".recharts-surface:focus",
+  ".recharts-surface [tabindex]:focus",
+];
+
+const KEYBOARD_FOCUS_SELECTORS: Array<string> = [
+  ".recharts-surface:focus-visible",
+  ".recharts-surface [tabindex]:focus-visible",
+];
+
+describe("Chart focus rings", () => {
+  test.each(POINTER_FOCUS_SELECTORS)(
+    "%s drops the user-agent focus ring",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline")).toBe("none");
+    },
+  );
+
+  test.each(KEYBOARD_FOCUS_SELECTORS)(
+    "%s draws a ring a keyboard reader can see",
+    (selector: string) => {
+      const outline: string | undefined = declaredValue(selector, "outline");
+
+      expect(outline).toBeDefined();
+      expect(outline).not.toBe("none");
+      // Themed, so the ring is legible on the dark canvas as well as the light one.
+      expect(outline).toContain("var(--ou-chart-focus-ring)");
+    },
+  );
+
+  /*
+   * A ring flush against the plot edge reads as a border on the chart itself.
+   * The offset is what makes it read as focus.
+   */
+  test.each(KEYBOARD_FOCUS_SELECTORS)(
+    "%s holds the ring off the plot",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline-offset")).toBe("2px");
+    },
+  );
+
+  /*
+   * :focus and :focus-visible weigh the same, so the keyboard ring only
+   * survives while it is declared later in the file. Reordering the two blocks
+   * would leave keyboard users with no focus indicator at all, and no other
+   * assertion here would fail.
+   */
+  test("the keyboard ring is declared after the ring it restores", () => {
+    const sourceOrder: (selectors: Array<string>) => Array<number> = (
+      selectors: Array<string>,
+    ): Array<number> => {
+      return selectors.flatMap((selector: string): Array<number> => {
+        return rulesFor(selector).map((rule: StyleRule): number => {
+          return rule.index;
+        });
+      });
+    };
+
+    const pointerRuleIndexes: Array<number> = sourceOrder(
+      POINTER_FOCUS_SELECTORS,
+    );
+    const keyboardRuleIndexes: Array<number> = sourceOrder(
+      KEYBOARD_FOCUS_SELECTORS,
+    );
+
+    // Ordering says nothing if one side of it went missing.
+    expect(pointerRuleIndexes.length).toBe(POINTER_FOCUS_SELECTORS.length);
+    expect(keyboardRuleIndexes.length).toBe(KEYBOARD_FOCUS_SELECTORS.length);
+
+    expect(Math.min(...keyboardRuleIndexes)).toBeGreaterThan(
+      Math.max(...pointerRuleIndexes),
+    );
+  });
+
+  /*
+   * Neither rule is fought over by anything else in the sheet, so neither
+   * needs !important to win. If one ever appears here it means something else
+   * started competing for the same property, and the pair above stopped being
+   * the whole story.
+   */
+  test.each([...POINTER_FOCUS_SELECTORS, ...KEYBOARD_FOCUS_SELECTORS])(
+    "%s wins on the cascade alone",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline")).not.toContain("!important");
+    },
+  );
+
+  describe("the accent the ring is drawn in", () => {
+    test.each([":root", "html.dark"])("%s defines it", (selector: string) => {
+      expect(declaredValue(selector, "--ou-chart-focus-ring")).toMatch(
+        /^#[0-9a-f]{6}$/i,
+      );
+    });
+
+    /*
+     * A single value cannot clear both canvases. Light and dark carry their
+     * own, the way every other --ou-chart-* token in the sheet does.
+     */
+    test("light and dark do not share one value", () => {
+      expect(declaredValue(":root", "--ou-chart-focus-ring")).not.toBe(
+        declaredValue("html.dark", "--ou-chart-focus-ring"),
+      );
+    });
+  });
+
+  /*
+   * The fix is deliberately narrow: it silences the ring on charts, and
+   * nothing else. A blanket `:focus { outline: none }` would take the focus
+   * indicator off the whole dashboard, which is the usual way this class of
+   * bug gets "fixed" and is far worse than the black box.
+   */
+  test("nothing outside the charts had its focus ring silenced", () => {
+    const silenced: Array<string> = selectorsDeclaring("outline", "none");
+
+    expect(silenced.length).toBeGreaterThan(0);
+
+    for (const selector of silenced) {
+      expect(selector.startsWith(".recharts-surface")).toBe(true);
+    }
+  });
+});

package/Tests/UI/Styles/ChartFocusRingCoverage.test.tsx

@@ -0,0 +1,377 @@
+import "@testing-library/jest-dom";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { selectorsDeclaring } from "./ThemeStylesheet";
+
+/*
+ * ResponsiveContainer measures its parent, which is always 0x0 in jsdom, so
+ * the chart renders nothing without a fixed size -- and a chart that renders
+ * nothing would pass every assertion in this file for the wrong reason. Same
+ * shim as ChartAnnotationRail.test.tsx; recharts is otherwise the real thing
+ * here, because what is under test is the DOM recharts actually produces.
+ */
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts") as Record<
+    string,
+    any
+  >;
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return React.cloneElement(children, { width: 800, height: 400 });
+    },
+  };
+});
+
+import AreaChartElement from "../../../UI/Components/Charts/Area/AreaChart";
+import BarChartElement from "../../../UI/Components/Charts/Bar/BarChart";
+import LineChartElement from "../../../UI/Components/Charts/Line/LineChart";
+import ChartCurve from "../../../UI/Components/Charts/Types/ChartCurve";
+import ChartEventKind from "../../../UI/Components/Charts/Types/ChartEventKind";
+import ChartReferenceRegionProps from "../../../UI/Components/Charts/Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../../../UI/Components/Charts/Types/TimeReferenceLineProps";
+import DataPoint from "../../../UI/Components/Charts/Types/DataPoint";
+import SeriesPoint from "../../../UI/Components/Charts/Types/SeriesPoints";
+import {
+  XAxis as ChartXAxis,
+  XAxisAggregateType,
+} from "../../../UI/Components/Charts/Types/XAxis/XAxis";
+import XAxisType from "../../../UI/Components/Charts/Types/XAxis/XAxisType";
+import YAxis, {
+  YAxisPrecision,
+} from "../../../UI/Components/Charts/Types/YAxis/YAxis";
+import YAxisType from "../../../UI/Components/Charts/Types/YAxis/YAxisType";
+import LogsHistogram from "../../../UI/Components/LogsViewer/components/LogsHistogram";
+import TelemetryHistogram from "../../../UI/Components/TelemetryViewer/components/TelemetryHistogram";
+import { HistogramBucket as LogsHistogramBucket } from "../../../UI/Components/LogsViewer/types";
+import {
+  HistogramBucket as TelemetryHistogramBucket,
+  HistogramSeriesOption,
+} from "../../../UI/Components/TelemetryViewer/types";
+
+/*
+ * The other half of the cover for
+ * https://github.com/OneUptime/oneuptime/issues/3528.
+ *
+ * ChartFocusRing.test.ts pins what the stylesheet declares. This file pins
+ * that those declarations still land on something: it renders the real charts
+ * with real recharts and checks every element the browser could focus inside
+ * a plot against the selectors the shipped Theme.css actually carries.
+ *
+ * The selectors are read out of the stylesheet rather than restated here on
+ * purpose. A recharts upgrade that renamed .recharts-surface, dropped the
+ * accessibility layer's tabindex, or moved the annotation shapes out from
+ * under the surface would leave the CSS silently covering nothing, and a
+ * hardcoded copy of the selector list would keep passing right through it.
+ */
+
+const START: Date = new Date("2026-03-02T00:00:00.000Z");
+const END: Date = new Date("2026-03-02T06:00:00.000Z");
+
+function minutesIn(minutes: number): Date {
+  return new Date(START.getTime() + minutes * 60 * 1000);
+}
+
+function buildSeries(): Array<SeriesPoint> {
+  const points: Array<DataPoint> = [];
+
+  for (let index: number = 0; index < 24; index++) {
+    points.push({
+      x: new Date(START.getTime() + index * 15 * 60 * 1000),
+      y: 100 + index,
+    });
+  }
+
+  return [{ seriesName: "latency", data: points }];
+}
+
+const X_AXIS: ChartXAxis = {
+  legend: "Time",
+  options: {
+    type: XAxisType.Time,
+    min: START,
+    max: END,
+    aggregateType: XAxisAggregateType.Average,
+  },
+};
+
+const Y_AXIS: YAxis = {
+  legend: "ms",
+  options: {
+    type: YAxisType.Number,
+    min: "auto",
+    max: "auto",
+    precision: YAxisPrecision.NoDecimals,
+    formatter: (value: number): string => {
+      return `${value} ms`;
+    },
+  },
+};
+
+/*
+ * Annotations are passed to every chart that takes them: the event chips and
+ * region pills they draw are focusable <g> elements portalled inside the
+ * plot, and they are the reason the selector needs its descendant half.
+ */
+const TIME_REFERENCE_LINES: Array<ChartTimeReferenceLineProps> = [
+  {
+    date: minutesIn(90),
+    label: "Incident: API is down",
+    kind: ChartEventKind.Incident,
+    color: "#f87171",
+  },
+];
+
+const REFERENCE_REGIONS: Array<ChartReferenceRegionProps> = [
+  {
+    startDate: minutesIn(180),
+    endDate: minutesIn(240),
+    label: "Maintenance",
+    color: "#60a5fa",
+  },
+];
+
+function logsBuckets(): Array<LogsHistogramBucket> {
+  return [
+    { time: "2026-03-02T00:00:00.000Z", severity: "Error", count: 4 },
+    { time: "2026-03-02T00:05:00.000Z", severity: "Error", count: 9 },
+    { time: "2026-03-02T00:10:00.000Z", severity: "Information", count: 21 },
+  ];
+}
+
+function telemetryBuckets(): Array<TelemetryHistogramBucket> {
+  return [
+    { time: "2026-03-02T00:00:00.000Z", series: "Ok", count: 108 },
+    { time: "2026-03-02T00:05:00.000Z", series: "Unset", count: 837 },
+    { time: "2026-03-02T00:10:00.000Z", series: "Ok", count: 42 },
+  ];
+}
+
+const TELEMETRY_SERIES: Array<HistogramSeriesOption> = [
+  { key: "Ok", label: "Ok", color: "#10b981" },
+  { key: "Unset", label: "Unset", color: "#9ca3af" },
+];
+
+interface ChartUnderTest {
+  name: string;
+  render: () => React.ReactElement;
+}
+
+/*
+ * Every chart in the product that recharts draws. The two histograms are the
+ * ones the issue was filed against; the three chart-library charts are the
+ * ones the reporter meant by "it happens around all the graphs".
+ */
+const CHARTS: Array<ChartUnderTest> = [
+  {
+    name: "LineChart",
+    render: (): React.ReactElement => {
+      return (
+        <LineChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={400}
+          sync={false}
+          syncid="focus-ring-test"
+          showLegend={true}
+          timeReferenceLines={TIME_REFERENCE_LINES}
+          referenceRegions={REFERENCE_REGIONS}
+        />
+      );
+    },
+  },
+  {
+    name: "AreaChart",
+    render: (): React.ReactElement => {
+      return (
+        <AreaChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={400}
+          sync={false}
+          syncid="focus-ring-test"
+          showLegend={true}
+          timeReferenceLines={TIME_REFERENCE_LINES}
+          referenceRegions={REFERENCE_REGIONS}
+        />
+      );
+    },
+  },
+  {
+    name: "BarChart",
+    render: (): React.ReactElement => {
+      return (
+        <BarChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          heightInPx={400}
+          sync={false}
+          syncid="focus-ring-test"
+          showLegend={true}
+          timeReferenceLines={TIME_REFERENCE_LINES}
+          referenceRegions={REFERENCE_REGIONS}
+        />
+      );
+    },
+  },
+  {
+    name: "LogsHistogram",
+    render: (): React.ReactElement => {
+      return (
+        <LogsHistogram
+          buckets={logsBuckets()}
+          isLoading={false}
+          onTimeRangeSelect={(): void => {}}
+        />
+      );
+    },
+  },
+  {
+    name: "TelemetryHistogram",
+    render: (): React.ReactElement => {
+      return (
+        <TelemetryHistogram
+          buckets={telemetryBuckets()}
+          isLoading={false}
+          series={TELEMETRY_SERIES}
+          title="Traces over time"
+          onTimeRangeSelect={(): void => {}}
+        />
+      );
+    },
+  },
+];
+
+/** The selectors Theme.css uses to take the user-agent ring off a chart. */
+const NEUTRALIZING_SELECTORS: Array<string> = selectorsDeclaring(
+  "outline",
+  "none",
+);
+
+function surfacesIn(container: HTMLElement): Array<SVGSVGElement> {
+  return Array.from(
+    container.querySelectorAll("svg.recharts-surface"),
+  ) as Array<SVGSVGElement>;
+}
+
+/*
+ * Everything inside a plot that the browser can put focus on -- the surface
+ * itself plus any tabindex-carrying shape drawn into it. These are exactly
+ * the elements Chrome's SVG user-agent stylesheet would ring.
+ */
+function focusableChartElements(container: HTMLElement): Array<Element> {
+  const focusable: Array<Element> = [];
+
+  for (const surface of surfacesIn(container)) {
+    if (surface.hasAttribute("tabindex")) {
+      focusable.push(surface);
+    }
+
+    focusable.push(...Array.from(surface.querySelectorAll("[tabindex]")));
+  }
+
+  return focusable;
+}
+
+function describeElement(element: Element): string {
+  const testId: string | null = element.getAttribute("data-testid");
+
+  return [
+    element.tagName.toLowerCase(),
+    element.getAttribute("class") ? `.${element.getAttribute("class")}` : "",
+    testId ? `[data-testid="${testId}"]` : "",
+    `[tabindex="${element.getAttribute("tabindex")}"]`,
+  ].join("");
+}
+
+afterEach((): void => {
+  cleanup();
+});
+
+describe("Chart focus ring coverage", () => {
+  test("the stylesheet still silences something", () => {
+    expect(NEUTRALIZING_SELECTORS.length).toBeGreaterThan(0);
+  });
+
+  describe.each(
+    CHARTS.map((chart: ChartUnderTest): [string, ChartUnderTest] => {
+      return [chart.name, chart];
+    }),
+  )("%s", (_name: string, chart: ChartUnderTest) => {
+    /*
+     * The premise of the whole fix. If recharts ever renames this class or
+     * stops handing the plot a tabindex, the CSS becomes dead weight and the
+     * rest of these assertions stop meaning anything -- so it fails here
+     * first, where the message says why.
+     */
+    test("draws a plot the browser can focus, under the class the fix targets", () => {
+      const { container } = render(chart.render());
+      const surfaces: Array<SVGSVGElement> = surfacesIn(container);
+
+      expect(surfaces.length).toBeGreaterThan(0);
+
+      const focusableSurfaces: Array<SVGSVGElement> = surfaces.filter(
+        (surface: SVGSVGElement): boolean => {
+          return surface.getAttribute("tabindex") === "0";
+        },
+      );
+
+      expect(focusableSurfaces.length).toBeGreaterThan(0);
+    });
+
+    /*
+     * The assertion the issue is really about: nothing a pointer can land on
+     * inside the plot is left to the user-agent ring.
+     */
+    test("no focusable element inside the plot is left to the user-agent ring", () => {
+      const { container } = render(chart.render());
+      const focusable: Array<Element> = focusableChartElements(container);
+
+      expect(focusable.length).toBeGreaterThan(0);
+
+      const uncovered: Array<string> = focusable
+        .filter((element: Element): boolean => {
+          return !NEUTRALIZING_SELECTORS.some((selector: string): boolean => {
+            /*
+             * Matched without the pseudo-class: jsdom can say whether the
+             * element is the surface or sits inside one, which is the part of
+             * the selector that decides coverage. Whether :focus is on is the
+             * browser's business, and the harness in the pull request covers
+             * that end.
+             */
+            return element.matches(selector.replace(/:focus(-visible)?/g, ""));
+          });
+        })
+        .map(describeElement);
+
+      expect(uncovered).toEqual([]);
+    });
+  });
+
+  /*
+   * The annotation shapes are focusable by design -- they are buttons a
+   * reader clicks -- and they were getting boxed one by one on every click.
+   * The descendant half of the selector is the only thing covering them, so
+   * this asserts they are really there to be covered rather than letting the
+   * loop above pass on a chart that happened to draw none.
+   */
+  test("the annotation layer really does put focusable shapes inside the plot", () => {
+    const { container } = render(CHARTS[0]!.render());
+
+    const annotationShapes: Array<Element> = focusableChartElements(
+      container,
+    ).filter((element: Element): boolean => {
+      return Boolean(
+        element.getAttribute("data-testid")?.startsWith("chart-annotation"),
+      );
+    });
+
+    expect(annotationShapes.length).toBeGreaterThan(0);
+  });
+});

package/Tests/UI/Styles/ThemeStylesheet.ts

@@ -0,0 +1,162 @@
+import fs from "fs";
+import path from "path";
+
+/*
+ * A reader for Common/UI/Styles/Theme.css, shared by the suites that hold the
+ * stylesheet to a contract.
+ *
+ * jsdom's CSS engine is not used for this on purpose. Theme.css is written for
+ * a real browser -- :is(), color-mix(), space-separated rgb() with a percent
+ * alpha -- and jsdom's parser drops what it cannot model, silently, which
+ * would turn a missing rule and an unparsed one into the same green test.
+ * Reading the file directly keeps a failure meaning what it says.
+ */
+
+const THEME_STYLESHEET_PATH: string = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "..",
+  "UI",
+  "Styles",
+  "Theme.css",
+);
+
+export interface StyleRule {
+  /** Normalised, one entry per comma-separated selector in the prelude. */
+  selectors: Array<string>;
+  declarations: Record<string, string>;
+  /** Source order, which decides the winner between equal specificities. */
+  index: number;
+}
+
+function normalizeWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+function parseDeclarations(body: string): Record<string, string> {
+  const declarations: Record<string, string> = {};
+
+  for (const declaration of body.split(";")) {
+    const separatorAt: number = declaration.indexOf(":");
+
+    if (separatorAt === -1) {
+      continue;
+    }
+
+    const property: string = normalizeWhitespace(
+      declaration.slice(0, separatorAt),
+    );
+    const value: string = normalizeWhitespace(
+      declaration.slice(separatorAt + 1),
+    );
+
+    if (property) {
+      declarations[property] = value;
+    }
+  }
+
+  return declarations;
+}
+
+/*
+ * Only top-level rules are collected. Everything asserted against this lives
+ * at the top level of the sheet; at-rules (@media, @keyframes) are skipped
+ * whole so their inner blocks cannot be mistaken for one.
+ */
+export function parseTopLevelRules(css: string): Array<StyleRule> {
+  const withoutComments: string = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const rules: Array<StyleRule> = [];
+
+  let prelude: string = "";
+  let body: string = "";
+  let depth: number = 0;
+
+  for (const character of withoutComments) {
+    if (character === "{") {
+      depth++;
+
+      if (depth === 1) {
+        continue;
+      }
+    }
+
+    if (character === "}") {
+      depth--;
+
+      if (depth === 0) {
+        const selectorText: string = normalizeWhitespace(prelude);
+
+        if (selectorText && !selectorText.startsWith("@")) {
+          rules.push({
+            selectors: selectorText.split(",").map(normalizeWhitespace),
+            declarations: parseDeclarations(body),
+            index: rules.length,
+          });
+        }
+
+        prelude = "";
+        body = "";
+        continue;
+      }
+    }
+
+    if (depth === 0) {
+      prelude += character;
+    } else {
+      body += character;
+    }
+  }
+
+  return rules;
+}
+
+export const THEME_RULES: Array<StyleRule> = parseTopLevelRules(
+  fs.readFileSync(THEME_STYLESHEET_PATH, "utf8"),
+);
+
+export function rulesFor(selector: string): Array<StyleRule> {
+  return THEME_RULES.filter((rule: StyleRule): boolean => {
+    return rule.selectors.includes(selector);
+  });
+}
+
+/*
+ * The last declaration wins. Every rule these suites reach for carries no
+ * !important and no specificity beyond one class plus one pseudo-class, so
+ * source order is the whole tiebreak.
+ */
+export function declaredValue(
+  selector: string,
+  property: string,
+): string | undefined {
+  const matching: Array<StyleRule> = rulesFor(selector).filter(
+    (rule: StyleRule): boolean => {
+      return rule.declarations[property] !== undefined;
+    },
+  );
+
+  return matching[matching.length - 1]?.declarations[property];
+}
+
+/**
+ * Every selector in the sheet that gives `property` exactly `value` -- the way
+ * a suite asks the shipped stylesheet what it actually covers, rather than
+ * restating the answer as a literal and testing itself.
+ */
+export function selectorsDeclaring(
+  property: string,
+  value: string,
+): Array<string> {
+  const selectors: Array<string> = [];
+
+  for (const rule of THEME_RULES) {
+    if (rule.declarations[property] !== value) {
+      continue;
+    }
+
+    selectors.push(...rule.selectors);
+  }
+
+  return selectors;
+}