@oneuptime/common 14.0.8 → 14.0.9

package/Tests/App/Dashboard/ChartCardTimeRangeZoom.test.tsx

@@ -0,0 +1,151 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * Issue #4105 on ChartCard, the trend card of the Service, RUM, Cloud,
+ * Serverless and Database overviews. Its line chart takes the page's zoom
+ * on its own (the chart library resolves it); the card adds:
+ *
+ *   - the "Drag to zoom" hint in its header, revealed while the pointer is
+ *     over the card, so the gesture is discoverable;
+ *   - a double-click on its "No data in this time range" box resets the
+ *     zoom, since a zoom into a quiet stretch leaves no chart to
+ *     double-click.
+ */
+
+const lineChartMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Components/Charts/Line/LineChart", () => {
+  return {
+    __esModule: true,
+    default: (props: Record<string, unknown>) => {
+      lineChartMock(props);
+      return <div data-testid="line-chart" />;
+    },
+  };
+});
+
+import ChartCard from "../../../../App/FeatureSet/Dashboard/src/Components/TelemetryResource/ChartCard";
+import { TimeRangeZoomProvider } from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomContext";
+import { TimeRangeZoom } from "../../../UI/Components/Charts/TimeRangeZoom/UseTimeRangeZoom";
+import { TIME_RANGE_ZOOM_HINT_TEST_ID } from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomHint";
+import IconProp from "../../../Types/Icon/IconProp";
+import SeriesPoint from "../../../UI/Components/Charts/Types/SeriesPoints";
+import TimeRange from "../../../Types/Time/TimeRange";
+
+const START: Date = new Date("2026-09-28T10:00:00.000Z");
+const END: Date = new Date("2026-09-28T11:00:00.000Z");
+
+const SERIES: Array<SeriesPoint> = [
+  {
+    seriesName: "Requests",
+    data: [{ x: new Date("2026-09-28T10:05:00.000Z"), y: 12 }],
+  },
+];
+
+function card(series: Array<SeriesPoint> = SERIES): React.ReactElement {
+  return (
+    <ChartCard
+      title="Requests"
+      icon={IconProp.ChartBar}
+      iconColor="blue"
+      series={series}
+      windowStart={START}
+      windowEnd={END}
+      syncId="service-overview"
+    />
+  );
+}
+
+function zoom(
+  isZoomed: boolean,
+  resetZoom: () => void = () => {},
+): TimeRangeZoom {
+  return {
+    isZoomed: isZoomed,
+    rangeBeforeZoom: isZoomed ? { range: TimeRange.PAST_ONE_HOUR } : null,
+    zoomToTimeRange: () => {},
+    resetZoom: resetZoom,
+  };
+}
+
+afterEach(() => {
+  cleanup();
+  lineChartMock.mockReset();
+});
+
+describe("ChartCard on a page that zooms", () => {
+  test("names the drag gesture in its header, revealed on hover", () => {
+    render(
+      <TimeRangeZoomProvider zoom={zoom(false)}>
+        {card()}
+      </TimeRangeZoomProvider>,
+    );
+
+    const hint: HTMLElement = screen.getByTestId(TIME_RANGE_ZOOM_HINT_TEST_ID);
+    expect(hint).toHaveTextContent("Drag to zoom");
+    expect(hint).toHaveClass("group-hover/zoomhint:opacity-100");
+    expect(hint.closest('[class~="group/zoomhint"]')).not.toBeNull();
+  });
+
+  test("names the reset too while the page is zoomed", () => {
+    render(
+      <TimeRangeZoomProvider zoom={zoom(true)}>{card()}</TimeRangeZoomProvider>,
+    );
+
+    expect(screen.getByTestId(TIME_RANGE_ZOOM_HINT_TEST_ID)).toHaveTextContent(
+      "Double-click to reset",
+    );
+  });
+
+  test("shows no hint on a page that does not zoom", () => {
+    render(card());
+
+    expect(screen.queryByTestId(TIME_RANGE_ZOOM_HINT_TEST_ID)).toBeNull();
+  });
+
+  test("hands the chart no handlers of its own, so the chart takes the page's", () => {
+    render(
+      <TimeRangeZoomProvider zoom={zoom(true)}>{card()}</TimeRangeZoomProvider>,
+    );
+
+    const props: Record<string, unknown> = lineChartMock.mock
+      .calls[0]![0] as Record<string, unknown>;
+    expect(props["onTimeRangeSelect"]).toBeUndefined();
+    expect(props["onTimeRangeReset"]).toBeUndefined();
+    expect(props["disableTimeRangeZoom"]).toBeUndefined();
+  });
+
+  test("a double-click on the empty state resets a zoom that found no data", () => {
+    const resetZoom: MockFunction = getJestMockFunction();
+    render(
+      <TimeRangeZoomProvider
+        zoom={zoom(true, resetZoom as unknown as () => void)}
+      >
+        {card([{ seriesName: "Requests", data: [] }])}
+      </TimeRangeZoomProvider>,
+    );
+
+    fireEvent.doubleClick(screen.getByText("No data in this time range"));
+
+    expect(resetZoom).toHaveBeenCalledTimes(1);
+  });
+
+  test("a double-click on the empty state does nothing when the page is not zoomed", () => {
+    const resetZoom: MockFunction = getJestMockFunction();
+    render(
+      <TimeRangeZoomProvider
+        zoom={zoom(false, resetZoom as unknown as () => void)}
+      >
+        {card([{ seriesName: "Requests", data: [] }])}
+      </TimeRangeZoomProvider>,
+    );
+
+    fireEvent.doubleClick(screen.getByText("No data in this time range"));
+
+    expect(resetZoom).not.toHaveBeenCalled();
+  });
+});

package/Tests/App/Dashboard/ChartCardZoomAffordances.test.tsx

@@ -0,0 +1,257 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * What ChartCard (the trend card of the Service, RUM, Cloud, Serverless and
+ * Database overviews) promises about the page's zoom (issue #4105):
+ *
+ * - its header names a gesture only where its body takes one. The chart
+ *   takes the drag (and, while the page is zoomed, the double-click); the
+ *   "No data in this time range" box takes the double-click while the page
+ *   is zoomed. The loading skeleton takes neither, and nor does the empty
+ *   box with nothing to reset: a "Drag to zoom" over them promised a drag
+ *   that did nothing.
+ * - while its empty box takes the double-click, the box's text is not
+ *   selectable: a double-click on text also selects a word, and the hosts
+ *   keep this very box on screen through the refetch the reset starts (for
+ *   good, if the page's own range is quiet too), so the word stayed
+ *   highlighted.
+ */
+
+jest.mock("../../../UI/Components/Charts/Line/LineChart", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div data-testid="line-chart" />;
+    },
+  };
+});
+
+import ChartCard from "../../../../App/FeatureSet/Dashboard/src/Components/TelemetryResource/ChartCard";
+import { TimeRangeZoomProvider } from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomContext";
+import { TimeRangeZoom } from "../../../UI/Components/Charts/TimeRangeZoom/UseTimeRangeZoom";
+import { TIME_RANGE_ZOOM_HINT_TEST_ID } from "../../../UI/Components/Charts/TimeRangeZoom/TimeRangeZoomHint";
+import IconProp from "../../../Types/Icon/IconProp";
+import SeriesPoint from "../../../UI/Components/Charts/Types/SeriesPoints";
+import TimeRange from "../../../Types/Time/TimeRange";
+
+const START: Date = new Date("2026-09-28T10:00:00.000Z");
+const END: Date = new Date("2026-09-28T11:00:00.000Z");
+
+const WITH_DATA: Array<SeriesPoint> = [
+  {
+    seriesName: "Requests",
+    data: [{ x: new Date("2026-09-28T10:05:00.000Z"), y: 12 }],
+  },
+];
+const QUIET: Array<SeriesPoint> = [{ seriesName: "Requests", data: [] }];
+
+const EMPTY_TEXT: string = "No data in this time range";
+
+interface CardState {
+  series: Array<SeriesPoint>;
+  loading?: boolean | undefined;
+  windowStart?: Date | null | undefined;
+}
+
+function card(state: CardState): React.ReactElement {
+  return (
+    <ChartCard
+      title="Requests"
+      icon={IconProp.ChartBar}
+      iconColor="blue"
+      series={state.series}
+      windowStart={state.windowStart === undefined ? START : state.windowStart}
+      windowEnd={END}
+      syncId="service-overview"
+      loading={state.loading}
+    />
+  );
+}
+
+function zoom(
+  isZoomed: boolean,
+  resetZoom: () => void = () => {},
+): TimeRangeZoom {
+  return {
+    isZoomed: isZoomed,
+    rangeBeforeZoom: isZoomed ? { range: TimeRange.PAST_ONE_HOUR } : null,
+    zoomToTimeRange: () => {},
+    resetZoom: resetZoom,
+  };
+}
+
+function onPage(isZoomed: boolean, state: CardState): React.ReactElement {
+  return (
+    <TimeRangeZoomProvider zoom={zoom(isZoomed)}>
+      {card(state)}
+    </TimeRangeZoomProvider>
+  );
+}
+
+function hint(): HTMLElement | null {
+  return screen.queryByTestId(TIME_RANGE_ZOOM_HINT_TEST_ID);
+}
+
+function emptyBox(): HTMLElement {
+  return screen.getByText(EMPTY_TEXT);
+}
+
+// The icon box at the end of the header, which sets the header's height.
+function headerIcon(container: HTMLElement): HTMLElement {
+  const icon: Element | null = container.querySelector(".h-7.w-7");
+  if (!icon) {
+    throw new Error("The header has no icon box");
+  }
+  return icon as HTMLElement;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ChartCard names a gesture only where its body takes one", () => {
+  test("over the chart: Drag to zoom", () => {
+    render(onPage(false, { series: WITH_DATA }));
+
+    expect(screen.getByTestId("line-chart")).toBeInTheDocument();
+    expect(hint()).toHaveTextContent("Drag to zoom");
+  });
+
+  test("over the chart on a zoomed page: Double-click to reset", () => {
+    render(onPage(true, { series: WITH_DATA }));
+
+    expect(hint()).toHaveTextContent("Double-click to reset");
+  });
+
+  test("over the loading skeleton: nothing, as it takes no drag", () => {
+    render(onPage(false, { series: [], loading: true }));
+
+    expect(screen.queryByTestId("line-chart")).toBeNull();
+    expect(hint()).toBeNull();
+  });
+
+  test("over the loading skeleton on a zoomed page: nothing, as it takes no double-click either", () => {
+    render(onPage(true, { series: [], loading: true }));
+
+    expect(hint()).toBeNull();
+  });
+
+  test("with no window yet (the skeleton): nothing", () => {
+    render(onPage(false, { series: WITH_DATA, windowStart: null }));
+
+    expect(hint()).toBeNull();
+  });
+
+  test("over the empty box with nothing to reset: nothing, as it takes no drag", () => {
+    render(onPage(false, { series: QUIET }));
+
+    expect(emptyBox()).toBeInTheDocument();
+    expect(hint()).toBeNull();
+  });
+
+  test("over the empty box on a zoomed page: Double-click to reset, which it takes", () => {
+    render(onPage(true, { series: QUIET }));
+
+    expect(hint()).toHaveTextContent("Double-click to reset");
+  });
+
+  test("the hint comes and goes without moving the header: the icon box sets its height in every state", () => {
+    const states: Array<[boolean, CardState]> = [
+      [false, { series: WITH_DATA }],
+      [false, { series: [], loading: true }],
+      [false, { series: QUIET }],
+      [true, { series: QUIET }],
+    ];
+    for (const [isZoomed, state] of states) {
+      const { container, unmount } = render(onPage(isZoomed, state));
+      expect(headerIcon(container)).toBeInTheDocument();
+      // The row the hint sits in is the icon's own row.
+      expect(headerIcon(container).parentElement).toHaveClass("items-center");
+      unmount();
+    }
+  });
+
+  test("once the first data lands, the chart names its drag", () => {
+    const { rerender } = render(onPage(false, { series: [], loading: true }));
+    expect(hint()).toBeNull();
+
+    rerender(onPage(false, { series: WITH_DATA }));
+
+    expect(hint()).toHaveTextContent("Drag to zoom");
+  });
+
+  test("a reset back to a quiet range takes the hint away from the empty box", () => {
+    const { rerender } = render(onPage(true, { series: QUIET }));
+    expect(hint()).toHaveTextContent("Double-click to reset");
+
+    rerender(onPage(false, { series: QUIET }));
+
+    expect(hint()).toBeNull();
+  });
+});
+
+describe("ChartCard's empty box takes the reset double-click without selecting a word", () => {
+  test("while the page is zoomed, its text is not selectable", () => {
+    render(onPage(true, { series: QUIET }));
+
+    expect(emptyBox()).toHaveClass("select-none");
+  });
+
+  test("and the double-click still resets the page", () => {
+    const resetZoom: MockFunction = getJestMockFunction();
+    render(
+      <TimeRangeZoomProvider
+        zoom={zoom(true, resetZoom as unknown as () => void)}
+      >
+        {card({ series: QUIET })}
+      </TimeRangeZoomProvider>,
+    );
+
+    fireEvent.doubleClick(emptyBox());
+
+    expect(resetZoom).toHaveBeenCalledTimes(1);
+  });
+
+  test("with nothing to reset, its text stays selectable", () => {
+    render(onPage(false, { series: QUIET }));
+
+    expect(emptyBox()).not.toHaveClass("select-none");
+  });
+
+  test("on a page that does not zoom, its text stays selectable", () => {
+    render(card({ series: QUIET }));
+
+    expect(emptyBox()).not.toHaveClass("select-none");
+  });
+
+  test("the reset hands the text back: selectable again once the page is back on its range", () => {
+    const { rerender } = render(onPage(true, { series: QUIET }));
+    const box: HTMLElement = emptyBox();
+    expect(box).toHaveClass("select-none");
+
+    rerender(onPage(false, { series: QUIET }));
+
+    // The very same box, kept on screen through the reset.
+    expect(emptyBox()).toBe(box);
+    expect(box).not.toHaveClass("select-none");
+  });
+
+  test("its look is otherwise unchanged", () => {
+    render(onPage(true, { series: QUIET }));
+
+    expect(emptyBox()).toHaveClass(
+      "flex",
+      "h-44",
+      "items-center",
+      "justify-center",
+      "rounded-md",
+      "bg-gray-50",
+      "text-sm",
+      "text-gray-400",
+    );
+  });
+});

package/Tests/App/Dashboard/ChartRefetchFrame.test.tsx

@@ -0,0 +1,141 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { cleanup, render, screen } from "@testing-library/react";
+import * as React from "react";
+import ChartRefetchFrame, {
+  CHART_LOADING_SKELETON_TEST_ID,
+  CHART_REFETCHING_TEST_ID,
+  ChartLoadingSkeleton,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/ChartRefetchFrame";
+
+/*
+ * The loading states of a self-loading chart (issue #4105 review: a drag or
+ * a double-click on a rate chart reloads it, and swapping it for a short
+ * skeleton moved the page under the pointer). Only the first load is a
+ * skeleton, at the chart's height; later loads keep the chart, dimmed and
+ * marked, and a failed one keeps it with the error above.
+ */
+
+afterEach(() => {
+  cleanup();
+});
+
+// A chart that counts its own mounts, to tell a remount from a re-render.
+let mounts: number = 0;
+
+const CountingChart: React.FunctionComponent = (): React.ReactElement => {
+  React.useEffect(() => {
+    mounts += 1;
+  }, []);
+  return <div data-testid="counting-chart">chart</div>;
+};
+
+function frame(
+  isRefetching: boolean,
+  refetchError?: string,
+): React.ReactElement {
+  return (
+    <ChartRefetchFrame
+      isRefetching={isRefetching}
+      {...(refetchError !== undefined ? { refetchError: refetchError } : {})}
+    >
+      <CountingChart />
+    </ChartRefetchFrame>
+  );
+}
+
+describe("ChartLoadingSkeleton", () => {
+  test("holds the height the chart will be drawn at", () => {
+    render(<ChartLoadingSkeleton heightInPx={220} />);
+
+    const skeleton: HTMLElement = screen.getByTestId(
+      CHART_LOADING_SKELETON_TEST_ID,
+    );
+    expect(skeleton).toHaveStyle({ height: "220px" });
+    expect(skeleton).toHaveClass("animate-pulse");
+    // No fixed-height class to fight the chart's own height.
+    expect(skeleton.className).not.toMatch(/\bh-\d/);
+  });
+
+  test("follows whatever height it is given", () => {
+    render(<ChartLoadingSkeleton heightInPx={300} />);
+
+    expect(screen.getByTestId(CHART_LOADING_SKELETON_TEST_ID)).toHaveStyle({
+      height: "300px",
+    });
+  });
+});
+
+describe("ChartRefetchFrame", () => {
+  test("idle: the chart as it is, no marker, not dimmed, no error", () => {
+    render(frame(false));
+
+    const chart: HTMLElement = screen.getByTestId("counting-chart");
+    expect(chart).toBeInTheDocument();
+    expect(screen.queryByTestId(CHART_REFETCHING_TEST_ID)).toBeNull();
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(chart.parentElement).not.toHaveClass("opacity-75");
+    expect(chart.parentElement?.parentElement).toHaveAttribute(
+      "aria-busy",
+      "false",
+    );
+  });
+
+  test("while a load is in flight the chart stays, dimmed, marked Refreshing", () => {
+    render(frame(true));
+
+    const chart: HTMLElement = screen.getByTestId("counting-chart");
+    expect(chart).toBeInTheDocument();
+    expect(chart.parentElement).toHaveClass("opacity-75");
+    expect(chart.parentElement?.parentElement).toHaveAttribute(
+      "aria-busy",
+      "true",
+    );
+    const marker: HTMLElement = screen.getByTestId(CHART_REFETCHING_TEST_ID);
+    expect(marker).toHaveTextContent("Refreshing");
+    // The marker never takes the pointer: a drag over it still reaches the chart.
+    expect(marker).toHaveClass("pointer-events-none");
+  });
+
+  test("a failed load shows its error above the chart, and the chart stays", () => {
+    render(frame(false, "The metrics service is unavailable."));
+
+    const alert: HTMLElement = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(
+      "Couldn't refresh — showing previously loaded data. The metrics service is unavailable.",
+    );
+    expect(screen.getByTestId("counting-chart")).toBeInTheDocument();
+    // The error comes first, the chart after it.
+    expect(
+      alert.compareDocumentPosition(screen.getByTestId("counting-chart")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("an empty error string shows no error", () => {
+    render(frame(false, ""));
+
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  test("a retry keeps the error up while it is in flight", () => {
+    render(frame(true, "Timed out."));
+
+    expect(screen.getByRole("alert")).toHaveTextContent("Timed out.");
+    expect(screen.getByTestId(CHART_REFETCHING_TEST_ID)).toBeInTheDocument();
+  });
+
+  test("going in and out of a reload, and through an error, never remounts the chart", () => {
+    mounts = 0;
+    const { rerender } = render(frame(false));
+    const chart: HTMLElement = screen.getByTestId("counting-chart");
+
+    rerender(frame(true));
+    rerender(frame(false, "Timed out."));
+    rerender(frame(true, "Timed out."));
+    rerender(frame(false));
+
+    expect(screen.getByTestId("counting-chart")).toBe(chart);
+    expect(mounts).toBe(1);
+  });
+});