@openshift-migration-advisor/shared-components 0.27.0-ad43dbdf05ab → 0.28.0-09381b4d22e5

package/src/report/__tests__/VMMigrationStatus.test.tsx

@@ -0,0 +1,178 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { chartColorFailure, chartColorSuccess } from "../constants.js";
+import { VMMigrationStatus } from "../VMMigrationStatus.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="migration-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a migration-status donut to render");
+  }
+  return props;
+};
+
+const selectView = async (name: string): Promise<void> => {
+  const user = userEvent.setup();
+  await user.click(
+    screen.getByRole("button", { name: "No issues vs with issues" }),
+  );
+  await user.click(screen.getByRole("menuitem", { name }));
+};
+
+describe("VMMigrationStatus", () => {
+  it("shows the empty state when there are no VMs", () => {
+    render(<VMMigrationStatus data={{ migratable: 0, nonMigratable: 0 }} />);
+
+    expect(screen.getByText("VM Migration Status")).toBeInTheDocument();
+    expect(
+      screen.getByText("Migration status data not collected"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("migration-donut")).not.toBeInTheDocument();
+  });
+
+  it("renders the migratable vs not-ready donut", () => {
+    render(<VMMigrationStatus data={{ migratable: 7, nonMigratable: 3 }} />);
+
+    expect(screen.getByTestId("migration-donut")).toHaveTextContent("10 VMs");
+
+    const props = renderedDonut();
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Migratable", 7],
+      ["Not ready for migration", 3],
+    ]);
+    expect(props.legend).toEqual({
+      Migratable: chartColorSuccess,
+      "Not ready for migration": chartColorFailure,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.subTitleColor).toBe(
+      "var(--pf-t--global--text--color--subtle)",
+    );
+  });
+
+  it("drills down into readiness when a donut slice is clicked", () => {
+    const onReadinessSelect = vi.fn();
+    render(
+      <VMMigrationStatus
+        data={{ migratable: 7, nonMigratable: 3 }}
+        onReadinessSelect={onReadinessSelect}
+      />,
+    );
+
+    const props = renderedDonut();
+    const [migratable, notReady] = props.data;
+    if (!migratable || !notReady) {
+      throw new Error("expected both readiness slices");
+    }
+
+    props.onItemClick?.(migratable);
+    expect(onReadinessSelect).toHaveBeenLastCalledWith(true);
+
+    props.onItemClick?.(notReady);
+    expect(onReadinessSelect).toHaveBeenLastCalledWith(false);
+  });
+
+  it("forwards the center-title click", () => {
+    const onTitleClick = vi.fn();
+    render(
+      <VMMigrationStatus
+        data={{ migratable: 1, nonMigratable: 0 }}
+        onTitleClick={onTitleClick}
+      />,
+    );
+
+    renderedDonut().onTitleClick?.();
+    expect(onTitleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the issue breakdown bars in category order", async () => {
+    render(
+      <VMMigrationStatus
+        data={{ migratable: 1, nonMigratable: 9 }}
+        issuesBreakdown={{
+          critical: 3,
+          error: 2,
+          warning: 5,
+          information: 1,
+          advisory: 0,
+        }}
+      />,
+    );
+
+    await selectView("With issues breakdown");
+
+    expect(screen.queryByTestId("migration-donut")).not.toBeInTheDocument();
+    expect(screen.getByTitle("Critical: 3 VMs")).toBeInTheDocument();
+    expect(screen.getByTitle("Warning: 5 VMs")).toBeInTheDocument();
+    expect(screen.getByTitle("Advisory: 0 VMs")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Totals may exceed the unique VM count/),
+    ).toBeInTheDocument();
+  });
+
+  it("drills down into a concern category when a bar is clicked", async () => {
+    const onCategorySelect = vi.fn();
+    render(
+      <VMMigrationStatus
+        data={{ migratable: 1, nonMigratable: 9 }}
+        issuesBreakdown={{
+          critical: 3,
+          error: 2,
+          warning: 5,
+          information: 1,
+          advisory: 0,
+        }}
+        onCategorySelect={onCategorySelect}
+      />,
+    );
+
+    await selectView("With issues breakdown");
+    await userEvent.setup().click(screen.getByTitle("Warning: 5 VMs"));
+
+    expect(onCategorySelect).toHaveBeenCalledWith("Warning");
+  });
+
+  it("shows the breakdown empty state when no issue data was collected", async () => {
+    render(<VMMigrationStatus data={{ migratable: 1, nonMigratable: 9 }} />);
+
+    await selectView("With issues breakdown");
+
+    expect(
+      screen.getByText("Issues breakdown data not collected"),
+    ).toBeInTheDocument();
+  });
+
+  it("passes the chart legend variant through", () => {
+    render(
+      <VMMigrationStatus
+        legendVariant="chart"
+        data={{ migratable: 1, nonMigratable: 1 }}
+      />,
+    );
+
+    expect(renderedDonut().legendVariant).toBe("chart");
+  });
+});

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

@@ -202,4 +202,51 @@ describe("captureChartElement", () => {
     ).toBe(true);
     expect(card.style.backgroundColor).toBe("rgb(30, 30, 30)");
   });
+
+  it("relights tables and labels via the clone cascade, not by hand-painting them", async () => {
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const root = document.createElement("div");
+    const label = document.createElement("span");
+    label.className = "pf-v6-c-label pf-m-compact pf-m-outline";
+    const labelContent = document.createElement("span");
+    labelContent.className = "pf-v6-c-label__content";
+    label.append(labelContent);
+    root.append(label);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      const clonedDoc = document.implementation.createHTMLDocument("export");
+      clonedDoc.documentElement.classList.add("pf-v6-theme-dark");
+      const cloneRoot = clonedDoc.createElement("div");
+      const cloneTh = clonedDoc.createElement("th");
+      cloneTh.className = "pf-v6-c-table__th";
+      const cloneLabelContent = clonedDoc.createElement("span");
+      cloneLabelContent.className = "pf-v6-c-label__content";
+      cloneRoot.append(cloneTh, cloneLabelContent);
+      clonedDoc.body.append(cloneRoot);
+
+      await options?.onclone?.(clonedDoc, cloneRoot);
+
+      // Dropping the dark class off the clone root is what relights these
+      // surfaces — the cascade does the work. We must NOT hand-paint inline
+      // colors onto PatternFly table/label nodes, and the live page stays dark.
+      expect(
+        clonedDoc.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(false);
+      expect(cloneTh.style.backgroundColor).toBe("");
+      expect(cloneLabelContent.style.backgroundColor).toBe("");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    expect(labelContent.style.backgroundColor).toBe("");
+  });
 });

package/src/report/captureChartElement.ts

@@ -11,8 +11,15 @@ import {
   shouldIgnoreChartExportElement,
 } from "./chartExport.js";
 
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
+
+export type CaptureChartElementOptions = {
+  /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+  scale?: number;
+};
 const HIDDEN_LAYOUT_STYLE_KEYS = [
   "display",
   "position",
@@ -187,6 +194,7 @@ function applyLightThemeSvgText(root: HTMLElement): void {
     }
     node.style.fill = LIGHT_EXPORT_TEXT;
     node.style.color = LIGHT_EXPORT_TEXT;
+    node.style.fontFamily = EXPORT_FONT_FAMILY;
   }
 }
 
@@ -359,7 +367,9 @@ function prepareCaptureLayout(element: HTMLElement): () => void {
 
 export async function captureChartElement(
   element: HTMLElement,
+  options: CaptureChartElementOptions = {},
 ): Promise<HTMLCanvasElement> {
+  const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
   const restoreHidden = revealHiddenChartAncestors(element);
   const restoreLayout = prepareCaptureLayout(element);
   element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -378,15 +388,20 @@ export async function captureChartElement(
       useCORS: true,
       backgroundColor: LIGHT_EXPORT_BACKGROUND,
       logging: false,
-      scale: CHART_CAPTURE_SCALE,
+      scale,
       imageTimeout: 0,
       ignoreElements: (node) =>
         node instanceof Element &&
         shouldIgnoreChartExportElement(node, element),
       onclone: (clonedDoc, clonedElement) => {
+        // Dropping the dark-theme class off the clone root makes every
+        // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+        // light automatically — html2canvas reads computed styles from this
+        // clone. Only Victory's inlined SVG text needs explicit recoloring.
         applyLightThemeToDocument(clonedDoc);
         applyComputedStylesToClone(element, clonedElement);
         applyLightThemeSvgText(clonedElement);
+        clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
       },
     });
   } finally {

package/src/report/chartExport.ts

@@ -14,7 +14,7 @@ export const chartExportScrollProps = {
 
 export const chartExportRootStyle: CSSProperties = {
   width: "100%",
-  height: "100%",
+  height: "auto",
 };
 
 export type ChartExportMeta = {

package/src/report/dashboardStyles.ts

@@ -30,6 +30,12 @@ export const dashboardStyles = {
     height: 100%;
   `,
 
+  /**
+   * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+   * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+   * charts when needed (phantom scrollbars on donut cards are avoided by the
+   * card layout and ChartExportSurface sizing, not a second body class).
+   */
   cardBodyScrollable: css`
     overflow: auto;
   `,
@@ -38,12 +44,9 @@ export const dashboardStyles = {
   // at the same specificity, which wins in the production build due to stylesheet
   // injection order. `!important` forces `hidden` regardless of that order.
   card: css`
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,
 

package/src/report/index.ts

@@ -192,9 +192,16 @@ export {
 export { ReportTable, type ReportTableProps } from "./ReportTable.js";
 export {
   type ReportExportOption,
+  type ReportExportSection,
   type StandardReportExportHandlers,
+  type StandardReportExportOptionsConfig,
   standardReportExportOptions,
 } from "./reportExportOptions.js";
+export {
+  type StorageDiskTierData,
+  StorageOverview,
+  type StorageOverviewProps,
+} from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export {
   ALL_TIERS_FILTER,
@@ -206,6 +213,11 @@ export {
   VCenterClusterDetails,
   type VCenterClusterDetailsProps,
 } from "./VCenterClusterDetails.js";
+export {
+  type IssuesBreakdownLike,
+  VMMigrationStatus,
+  type VMMigrationStatusProps,
+} from "./VMMigrationStatus.js";
 export {
   VmPowerStates,
   type VmPowerStatesProps,

package/src/report/reportExportOptions.ts

@@ -1,9 +1,16 @@
+export interface ReportExportSection {
+  id: string;
+  label: string;
+}
+
 export interface ReportExportOption {
   key: string;
   label: string;
   description?: string;
   onSelect: () => void;
   isDisabled?: boolean;
+  /** When set, the menu groups rows and shows `label` as the group heading. */
+  section?: ReportExportSection;
 }
 
 export interface StandardReportExportHandlers {
@@ -12,22 +19,38 @@ export interface StandardReportExportHandlers {
   onExportHtml?: () => void;
 }
 
+export type StandardReportExportOptionsConfig = StandardReportExportHandlers & {
+  /** Dropdown group label for PDF / HTML / PNG. Default: `"Assessment report"`. */
+  assessmentSectionLabel?: string;
+};
+
+const DEFAULT_ASSESSMENT_SECTION: ReportExportSection = {
+  id: "assessment-report",
+  label: "Assessment report",
+};
+
 /**
- * Standard report-download actions. Omit a handler to hide that format.
+ * Optional helper for chart-based assessment downloads. Omit a handler to hide
+ * that format. Override `assessmentSectionLabel` if product copy differs per app.
  */
 export const standardReportExportOptions = ({
   onExportPdf,
   onExportPng,
   onExportHtml,
-}: StandardReportExportHandlers): ReportExportOption[] => {
+  assessmentSectionLabel,
+}: StandardReportExportOptionsConfig): ReportExportOption[] => {
+  const section: ReportExportSection = assessmentSectionLabel
+    ? { ...DEFAULT_ASSESSMENT_SECTION, label: assessmentSectionLabel }
+    : DEFAULT_ASSESSMENT_SECTION;
+
   const options: ReportExportOption[] = [];
 
   if (onExportPdf) {
     options.push({
       key: "pdf",
       label: "PDF",
-      description: "Export the report as a PDF",
       onSelect: onExportPdf,
+      section,
     });
   }
 
@@ -35,8 +58,8 @@ export const standardReportExportOptions = ({
     options.push({
       key: "html",
       label: "HTML",
-      description: "Export the report as HTML",
       onSelect: onExportHtml,
+      section,
     });
   }
 
@@ -44,8 +67,8 @@ export const standardReportExportOptions = ({
     options.push({
       key: "png",
       label: "PNG",
-      description: "Download all charts as PNG files",
       onSelect: onExportPng,
+      section,
     });
   }