@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-6438cd962b5f

package/src/report/__tests__/chartExportPackagers.test.ts

@@ -0,0 +1,282 @@
+import { describe, expect, it } from "vitest";
+import {
+  chartExportViewsFromLabels,
+  restoreChartExportViews,
+  sortRegisteredChartsByDocumentOrder,
+  toBulkChartCaptureSources,
+} from "../chartExport.js";
+import { getChartExportFilename } from "../chartExportFilenames.js";
+import { buildHtmlReport, escapeHtml } from "../htmlExport.js";
+import { buildPdfFromCharts } from "../pdfExport.js";
+import {
+  fitPdfImageSize,
+  placePdfBlock,
+  splitSegmentForPageHeight,
+} from "../pdfPage.js";
+
+describe("chart export filenames", () => {
+  const date = new Date("2026-07-01T15:30:00");
+
+  it("names pdf, html, and zip downloads with the export date", () => {
+    expect(getChartExportFilename("pdf", date)).toBe(
+      "migration-export-2026-07-01.pdf",
+    );
+    expect(getChartExportFilename("html", date)).toBe(
+      "migration-export-2026-07-01.html",
+    );
+    expect(getChartExportFilename("zip", date)).toBe(
+      "migration-export-2026-07-01-charts.zip",
+    );
+  });
+});
+
+describe("dropdown chart export views", () => {
+  it("builds a titled view list from card dropdown labels", () => {
+    expect(
+      chartExportViewsFromLabels("VM migration status", {
+        issuesVsNoIssues: "No issues vs with issues",
+        issuesBreakdown: "With issues breakdown",
+      }),
+    ).toEqual([
+      {
+        id: "issuesVsNoIssues",
+        title: "VM migration status — No issues vs with issues",
+      },
+      {
+        id: "issuesBreakdown",
+        title: "VM migration status — With issues breakdown",
+      },
+    ]);
+  });
+
+  it("captures every dropdown view then restores the visible one", async () => {
+    const element = document.createElement("div");
+    const activated: string[] = [];
+    const charts = [
+      {
+        id: "vm",
+        title: "Visible",
+        filename: "visible.png",
+        element,
+        exportViews: [
+          { id: "a", title: "View A" },
+          { id: "b", title: "View B" },
+        ],
+        activeExportViewId: "a",
+        setExportView: async (viewId: string) => {
+          activated.push(viewId);
+        },
+      },
+    ];
+
+    const sources = toBulkChartCaptureSources(charts, async () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    expect(sources.map((source) => source.title)).toEqual(["View A", "View B"]);
+    await sources[0].capture();
+    await sources[1].capture();
+    await restoreChartExportViews(charts);
+
+    expect(activated).toEqual(["a", "b", "a"]);
+  });
+
+  it("lays out hidden cards before switching dropdown views", async () => {
+    const element = document.createElement("div");
+    const order: string[] = [];
+    const charts = [
+      {
+        id: "vm",
+        title: "Visible",
+        filename: "visible.png",
+        element,
+        exportViews: [
+          { id: "a", title: "View A" },
+          { id: "b", title: "View B" },
+        ],
+        activeExportViewId: "a",
+        setExportView: async () => {
+          order.push("setView");
+        },
+      },
+    ];
+
+    const [source] = toBulkChartCaptureSources(
+      charts,
+      async () => {
+        order.push("capture");
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        return canvas;
+      },
+      () => {
+        order.push("prepare");
+        return () => {
+          order.push("restore");
+        };
+      },
+    );
+
+    await source.capture();
+    expect(order).toEqual(["prepare", "setView", "capture", "restore"]);
+  });
+});
+
+describe("sortRegisteredChartsByDocumentOrder", () => {
+  it("orders registered nodes by their position in the document", () => {
+    const root = document.createElement("div");
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    root.append(first, second);
+    document.body.append(root);
+
+    const sorted = sortRegisteredChartsByDocumentOrder([
+      {
+        id: "second",
+        title: "Second",
+        filename: "second.png",
+        element: second,
+      },
+      {
+        id: "first",
+        title: "First",
+        filename: "first.png",
+        element: first,
+      },
+    ]);
+
+    expect(sorted.map((chart) => chart.id)).toEqual(["first", "second"]);
+    root.remove();
+  });
+});
+
+describe("splitSegmentForPageHeight", () => {
+  it("splits a tall chart across page height", () => {
+    expect(
+      splitSegmentForPageHeight({ top: 0, height: 250 }, 250, 100),
+    ).toEqual([
+      { top: 0, height: 100 },
+      { top: 100, height: 100 },
+      { top: 200, height: 50 },
+    ]);
+  });
+});
+
+describe("fitPdfImageSize", () => {
+  it("keeps full content width when the chart fits the page", () => {
+    expect(fitPdfImageSize(800, 200, 190, 277)).toEqual({
+      widthMm: 190,
+      heightMm: 47.5,
+    });
+  });
+
+  it("scales down a chart taller than the page", () => {
+    expect(fitPdfImageSize(1000, 2000, 200, 100)).toEqual({
+      widthMm: 50,
+      heightMm: 100,
+    });
+  });
+});
+
+describe("placePdfBlock", () => {
+  it("stacks charts on the same page while they fit", () => {
+    expect(placePdfBlock(null, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+    expect(placePdfBlock(68, 50, 10, 287)).toEqual({
+      y: 68,
+      needsNewPage: false,
+    });
+    expect(placePdfBlock(250, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+  });
+});
+
+describe("buildPdfFromCharts with extra text pages", () => {
+  it("appends a text page even when there are no chart captures", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations",
+        items: [
+          { label: "Cluster name", value: "cluster-1" },
+          { label: "Target platform", value: "Bare metal" },
+          {
+            label: "Total nodes",
+            value: "6 (3 workers + 3 control plane)",
+          },
+          { label: "Failover capacity", value: "1 failover nodes" },
+          { label: "Worker node size", value: "8 CPU, 32 GB memory" },
+          {
+            label: "Control plane node size",
+            value: "16 CPU, 64 GB memory",
+          },
+        ],
+        footer: "Note: estimates only.",
+      },
+    ]);
+
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.size).toBeGreaterThan(0);
+    expect(blob.type).toBe("application/pdf");
+  });
+
+  it("paginates extra pages with many rows without throwing", async () => {
+    const manyItems = Array.from({ length: 60 }, (_, index) => ({
+      label: `Field ${index}`,
+      value: `Value ${index}`,
+    }));
+
+    const blob = await buildPdfFromCharts([], "Report", [
+      { title: "Cluster sizing recommendations", items: manyItems },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+
+  it("supports multiple extra pages (e.g. one per sized cluster)", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations — cluster-a",
+        items: [{ label: "Cluster name", value: "cluster-a" }],
+      },
+      {
+        title: "Cluster sizing recommendations — cluster-b",
+        items: [{ label: "Cluster name", value: "cluster-b" }],
+      },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+});
+
+describe("buildHtmlReport", () => {
+  it("embeds captured chart images and escapes the title", () => {
+    const html = buildHtmlReport(
+      'Report <script>alert("x")</script>',
+      [
+        {
+          name: "Infrastructure summary",
+          dataUrl: "data:image/png;base64,abc",
+        },
+      ],
+      new Date("2026-07-01T15:30:00"),
+    );
+
+    expect(html).toContain(
+      "Report &lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt;",
+    );
+    expect(html).toContain('src="data:image/png;base64,abc"');
+    expect(html).toContain("Infrastructure summary");
+    expect(html).not.toContain("border:");
+    expect(html).toContain("width: 100%");
+    expect(escapeHtml("<b>")).toBe("&lt;b&gt;");
+    expect(escapeHtml("it's")).toBe("it&#39;s");
+  });
+});

package/src/report/captureChartElement.ts

@@ -0,0 +1,368 @@
+import html2canvas from "html2canvas-pro";
+import {
+  CHART_EXPORT_CAPTURING_ATTR,
+  CHART_EXPORT_SCROLL_ATTR,
+  shouldIgnoreChartExportElement,
+} from "./chartExport.js";
+
+/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
+const CHART_CAPTURE_SCALE = 1;
+const HIDDEN_LAYOUT_STYLE_KEYS = [
+  "display",
+  "position",
+  "left",
+  "top",
+  "width",
+  "maxHeight",
+  "overflow",
+  "zIndex",
+] as const;
+
+type HiddenLayoutStyleKey = (typeof HIDDEN_LAYOUT_STYLE_KEYS)[number];
+
+type HiddenAncestorSnapshot = {
+  node: HTMLElement;
+  hidden: HTMLElement["hidden"];
+  styles: Record<HiddenLayoutStyleKey, string>;
+};
+
+function isDisplayNone(node: HTMLElement): boolean {
+  return window.getComputedStyle(node).display === "none";
+}
+
+/**
+ * Tab panels stay mounted with `hidden` / `display:none` when another tab is
+ * active. html2canvas then measures a 0×0 box. Reveal those ancestors off-screen
+ * for the duration of the capture, then restore.
+ */
+export function revealHiddenChartAncestors(element: HTMLElement): () => void {
+  const saved: HiddenAncestorSnapshot[] = [];
+  let node: HTMLElement | null = element;
+
+  while (node && node !== document.documentElement) {
+    if (node.hidden || isDisplayNone(node)) {
+      saved.push({
+        node,
+        hidden: node.hidden,
+        styles: {
+          display: node.style.display,
+          position: node.style.position,
+          left: node.style.left,
+          top: node.style.top,
+          width: node.style.width,
+          maxHeight: node.style.maxHeight,
+          overflow: node.style.overflow,
+          zIndex: node.style.zIndex,
+        },
+      });
+    }
+    node = node.parentElement;
+  }
+
+  if (saved.length === 0) {
+    return () => undefined;
+  }
+
+  const outermost = saved[saved.length - 1].node;
+  const parentWidth = outermost.parentElement?.clientWidth ?? 0;
+  const layoutWidth =
+    parentWidth || document.documentElement.clientWidth || 1024;
+
+  for (const entry of saved) {
+    entry.node.hidden = false;
+    entry.node.style.display = "block";
+    entry.node.style.position = "fixed";
+    entry.node.style.left = "-10000px";
+    entry.node.style.top = "0";
+    entry.node.style.width = `${layoutWidth}px`;
+    entry.node.style.maxHeight = "none";
+    entry.node.style.overflow = "visible";
+    entry.node.style.zIndex = "-1";
+  }
+
+  return () => {
+    for (const entry of saved) {
+      entry.node.hidden = entry.hidden;
+      for (const key of HIDDEN_LAYOUT_STYLE_KEYS) {
+        entry.node.style[key] = entry.styles[key];
+      }
+    }
+  };
+}
+
+const PADDED_CAPTURE_SELECTOR =
+  ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
+const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
+const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+
+function queryCards(root: HTMLElement): HTMLElement[] {
+  const cards = Array.from(
+    root.querySelectorAll<HTMLElement>(CARD_CAPTURE_SELECTOR),
+  );
+  if (root.matches(CARD_CAPTURE_SELECTOR)) {
+    cards.unshift(root);
+  }
+  return cards;
+}
+
+function resolvedFill(color: string): string {
+  return TRANSPARENT_FILLS.has(color) ? "#ffffff" : color;
+}
+
+function applyComputedPadding(source: HTMLElement, dest: HTMLElement): void {
+  const computed = window.getComputedStyle(source);
+  dest.style.paddingTop = computed.paddingTop;
+  dest.style.paddingRight = computed.paddingRight;
+  dest.style.paddingBottom = computed.paddingBottom;
+  dest.style.paddingLeft = computed.paddingLeft;
+}
+
+function readCardBorder(source: HTMLElement): {
+  width: string;
+  style: string;
+  color: string;
+} | null {
+  if (source.style.borderWidth && source.style.borderStyle) {
+    return {
+      width: source.style.borderWidth,
+      style: source.style.borderStyle,
+      color: source.style.borderColor,
+    };
+  }
+  const computed = window.getComputedStyle(source);
+  const before = window.getComputedStyle(source, "::before");
+  const width =
+    before.borderTopWidth && before.borderTopWidth !== "0px"
+      ? before.borderTopWidth
+      : computed.borderTopWidth;
+  const style =
+    before.borderTopStyle && before.borderTopStyle !== "none"
+      ? before.borderTopStyle
+      : computed.borderTopStyle;
+  const color =
+    before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
+      ? before.borderTopColor
+      : computed.borderTopColor;
+  if (width === "0px" || style === "none") {
+    return null;
+  }
+  return { width, style, color };
+}
+
+function applyCardChrome(source: HTMLElement, dest: HTMLElement): void {
+  const computed = window.getComputedStyle(source);
+  dest.style.borderRadius = computed.borderRadius;
+  dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
+  dest.style.overflow = "hidden";
+  const border = readCardBorder(source);
+  if (border) {
+    dest.style.borderWidth = border.width;
+    dest.style.borderStyle = border.style;
+    dest.style.borderColor = border.color;
+  }
+}
+
+function hideCardBeforePseudo(): () => void {
+  const style = document.createElement("style");
+  style.setAttribute("data-chart-export-hide-before", "");
+  style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+  document.head.append(style);
+  return () => {
+    style.remove();
+  };
+}
+
+function copyComputedPadding(node: HTMLElement): {
+  paddingTop: string;
+  paddingRight: string;
+  paddingBottom: string;
+  paddingLeft: string;
+} {
+  const previous = {
+    paddingTop: node.style.paddingTop,
+    paddingRight: node.style.paddingRight,
+    paddingBottom: node.style.paddingBottom,
+    paddingLeft: node.style.paddingLeft,
+  };
+  applyComputedPadding(node, node);
+  return previous;
+}
+
+function copyCardChrome(node: HTMLElement): {
+  borderRadius: string;
+  backgroundColor: string;
+  overflow: string;
+  overflowPriority: string;
+  borderWidth: string;
+  borderStyle: string;
+  borderColor: string;
+  minHeight: string;
+  height: string;
+  maxHeight: string;
+} {
+  const previous = {
+    borderRadius: node.style.borderRadius,
+    backgroundColor: node.style.backgroundColor,
+    overflow: node.style.getPropertyValue("overflow"),
+    overflowPriority: node.style.getPropertyPriority("overflow"),
+    borderWidth: node.style.borderWidth,
+    borderStyle: node.style.borderStyle,
+    borderColor: node.style.borderColor,
+    minHeight: node.style.minHeight,
+    height: node.style.height,
+    maxHeight: node.style.maxHeight,
+  };
+  applyCardChrome(node, node);
+  node.style.minHeight = "0px";
+  node.style.height = "auto";
+  node.style.maxHeight = "none";
+  return previous;
+}
+
+function applyComputedStylesToClone(
+  sourceRoot: HTMLElement,
+  clonedRoot: HTMLElement,
+): void {
+  const sourceCards = queryCards(sourceRoot);
+  const cloneCards = queryCards(clonedRoot);
+  sourceCards.forEach((source, index) => {
+    const dest = cloneCards[index];
+    if (dest) {
+      applyCardChrome(source, dest);
+    }
+  });
+
+  const sources = sourceRoot.querySelectorAll<HTMLElement>(
+    PADDED_CAPTURE_SELECTOR,
+  );
+  const dests = clonedRoot.querySelectorAll<HTMLElement>(
+    PADDED_CAPTURE_SELECTOR,
+  );
+  sources.forEach((source, index) => {
+    const dest = dests[index];
+    if (dest) {
+      applyComputedPadding(source, dest);
+    }
+  });
+}
+
+function prepareCaptureLayout(element: HTMLElement): () => void {
+  const expandNodes = [
+    element,
+    ...Array.from(
+      element.querySelectorAll<HTMLElement>(
+        `[${CHART_EXPORT_SCROLL_ATTR}], .pf-v6-c-card__body`,
+      ),
+    ),
+  ];
+  const cards = queryCards(element);
+  const paddedNodes = Array.from(
+    element.querySelectorAll<HTMLElement>(PADDED_CAPTURE_SELECTOR),
+  );
+  const previousExpand = expandNodes.map((node) => ({
+    node,
+    overflow: node.style.getPropertyValue("overflow"),
+    overflowPriority: node.style.getPropertyPriority("overflow"),
+    maxHeight: node.style.maxHeight,
+    height: node.style.height,
+  }));
+  const previousChrome = cards.map((node) => ({
+    node,
+    ...copyCardChrome(node),
+  }));
+  const previousPadding = paddedNodes.map((node) => ({
+    node,
+    ...copyComputedPadding(node),
+  }));
+
+  for (const node of expandNodes) {
+    node.style.setProperty("overflow", "visible", "important");
+    node.style.maxHeight = "none";
+    node.style.height = "auto";
+  }
+
+  return () => {
+    for (const entry of previousExpand) {
+      if (entry.overflow) {
+        entry.node.style.setProperty(
+          "overflow",
+          entry.overflow,
+          entry.overflowPriority,
+        );
+      } else {
+        entry.node.style.removeProperty("overflow");
+      }
+      entry.node.style.maxHeight = entry.maxHeight;
+      entry.node.style.height = entry.height;
+    }
+    for (const entry of previousChrome) {
+      entry.node.style.borderRadius = entry.borderRadius;
+      entry.node.style.backgroundColor = entry.backgroundColor;
+      if (entry.overflow) {
+        entry.node.style.setProperty(
+          "overflow",
+          entry.overflow,
+          entry.overflowPriority,
+        );
+      } else {
+        entry.node.style.removeProperty("overflow");
+      }
+      entry.node.style.borderWidth = entry.borderWidth;
+      entry.node.style.borderStyle = entry.borderStyle;
+      entry.node.style.borderColor = entry.borderColor;
+      entry.node.style.minHeight = entry.minHeight;
+      entry.node.style.height = entry.height;
+      entry.node.style.maxHeight = entry.maxHeight;
+    }
+    for (const entry of previousPadding) {
+      entry.node.style.paddingTop = entry.paddingTop;
+      entry.node.style.paddingRight = entry.paddingRight;
+      entry.node.style.paddingBottom = entry.paddingBottom;
+      entry.node.style.paddingLeft = entry.paddingLeft;
+    }
+  };
+}
+
+export async function captureChartElement(
+  element: HTMLElement,
+): Promise<HTMLCanvasElement> {
+  const restoreHidden = revealHiddenChartAncestors(element);
+  const restoreLayout = prepareCaptureLayout(element);
+  element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+  const restoreCardBefore = hideCardBeforePseudo();
+
+  try {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+    if (element.getBoundingClientRect().width < 1) {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => resolve());
+      });
+    }
+    return html2canvas(element, {
+      useCORS: true,
+      backgroundColor: null,
+      logging: false,
+      scale: CHART_CAPTURE_SCALE,
+      imageTimeout: 0,
+      ignoreElements: (node) =>
+        node instanceof Element &&
+        shouldIgnoreChartExportElement(node, element),
+      onclone: (_clonedDoc, clonedElement) => {
+        applyComputedStylesToClone(element, clonedElement);
+      },
+    });
+  } finally {
+    restoreCardBefore();
+    element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
+    restoreLayout();
+    restoreHidden();
+  }
+}