@openshift-migration-advisor/shared-components 0.30.0 → 0.31.0-1fbc1a716dab

package/README.md

@@ -41,7 +41,7 @@ import {
 
 <ChartExportProvider>
   <Dashboard />
-</ChartExportProvider>
+</ChartExportProvider>;
 ```
 
 `ChartExportProvider` lazy-loads capture, ZIP, PDF, and HTML. Wrap the chart visual (not the Card chrome) in `ChartExportSurface`. All formats snapshot those same nodes, encode one chart at a time, and drop the canvas. There is no second print tree and no `isExportMode` render:
@@ -56,7 +56,7 @@ import { ChartExportSurface } from "@openshift-migration-advisor/shared-componen
       <MigrationDonutChart {...chartProps} />
     </ChartExportSurface>
   </CardBody>
-</Card>
+</Card>;
 ```
 
 `ReportExportMenu` accepts a fully custom `options` list. `standardReportExportOptions()` builds the PDF / HTML / PNG entries; omit a handler to hide that format.
@@ -78,10 +78,10 @@ The package is published to npm under `@openshift-migration-advisor/shared-compo
 
 **Workflow:** [`.github/workflows/release-shared-components.yaml`](../../.github/workflows/release-shared-components.yaml)
 
-| Trigger | Result |
-|---|---|
+| Trigger                                                            | Result                                  |
+| ------------------------------------------------------------------ | --------------------------------------- |
 | Push to `main` / `stable` changing `packages/shared-components/**` | Prerelease: `{latestTag}-{12-char-sha}` |
-| Tag `vX.Y.Z` | Release: `X.Y.Z` |
+| Tag `vX.Y.Z`                                                       | Release: `X.Y.Z`                        |
 
 ### One-time npm setup (required before first publish)
 
@@ -95,4 +95,4 @@ No npm token is stored in the repo; publish uses OIDC (`id-token: write`).
 
 ## License
 
-[Apache 2.0](LICENSE)
+[Apache 2.0](LICENSE)

package/dist/charts/MigrationDonutChart.js

@@ -144,7 +144,7 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
     const innerRadius = useMemo(() => {
         const outerApprox = Math.min(width, height) / 2;
         const computed = outerApprox - donutThickness;
-        return computed > 0 ? computed : 0;
+        return Math.max(computed, 0);
     }, [width, height, donutThickness]);
     const totalY = useMemo(() => {
         return chartData.reduce((sum, item) => sum + (Number(item.y) || 0), 0);

package/dist/report/FeatureStatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}
+{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA0B1D,CAAC"}

package/dist/report/FeatureStatusBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Label } from "@patternfly/react-core";
+import { Icon, Label } from "@patternfly/react-core";
 import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
 export const FeatureStatusBadge = ({ status }) => {
     if (status === "unknown") {
@@ -8,6 +8,6 @@ export const FeatureStatusBadge = ({ status }) => {
     if (status === "enabled") {
         return (_jsx(Label, { color: "green", isCompact: true, icon: _jsx(CheckCircleIcon, {}), children: "Enabled" }));
     }
-    return (_jsx(Label, { variant: "outline", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
+    return (_jsx(Label, { variant: "outline", isCompact: true, icon: _jsx(Icon, { status: "danger", children: _jsx(TimesCircleIcon, {}) }), children: "Disabled" }));
 };
 FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.30.0",
+  "version": "0.31.0-1fbc1a716dab",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
     "README.md"
   ],
   "dependencies": {
-    "html2canvas-pro": "^2.5.2",
+    "html2canvas-pro": "^2.6.0",
     "jspdf": "^4.2.1",
     "jszip": "^3.10.2"
   }

package/src/charts/MigrationDonutChart.tsx

@@ -266,7 +266,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
   const innerRadius = useMemo(() => {
     const outerApprox = Math.min(width, height) / 2;
     const computed = outerApprox - donutThickness;
-    return computed > 0 ? computed : 0;
+    return Math.max(computed, 0);
   }, [width, height, donutThickness]);
 
   const totalY = useMemo(() => {

package/src/report/FeatureStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Label } from "@patternfly/react-core";
+import { Icon, Label } from "@patternfly/react-core";
 import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 import type { FeatureStatus } from "./infrastructureSummaryModel.js";
@@ -21,7 +21,15 @@ export const FeatureStatusBadge: FC<FeatureStatusBadgeProps> = ({ status }) => {
   }
 
   return (
-    <Label variant="outline" isCompact icon={<TimesCircleIcon />}>
+    <Label
+      variant="outline"
+      isCompact
+      icon={
+        <Icon status="danger">
+          <TimesCircleIcon />
+        </Icon>
+      }
+    >
       Disabled
     </Label>
   );

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

@@ -3,7 +3,12 @@ import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useState } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { ChartExportProvider, useChartExport } from "../ChartExportProvider.js";
+import {
+  type BuildChartDocument,
+  type BuildPdfDocument,
+  ChartExportProvider,
+  useChartExport,
+} from "../ChartExportProvider.js";
 import { ChartExportSurface } from "../ChartExportSurface.js";
 import {
   CHART_EXPORT_HIDE_ATTR,
@@ -32,6 +37,29 @@ vi.mock("../../charts/MigrationDonutChart.js", () => ({
 
 afterEach(() => cleanup());
 
+function DropdownChart(): JSX.Element {
+  const [view, setView] = useState("a");
+  return (
+    <ChartExportSurface
+      id="vm"
+      title={view === "a" ? "View A" : "View B"}
+      exportViews={[
+        { id: "a", title: "View A" },
+        { id: "b", title: "View B" },
+      ]}
+      activeExportViewId={view}
+      onExportViewChange={setView}
+    >
+      <div data-testid="active-view">{view}</div>
+    </ChartExportSurface>
+  );
+}
+
+function ErrorText(): JSX.Element {
+  const exportApi = useChartExport();
+  return <div>{exportApi?.exportError}</div>;
+}
+
 function RegisteredChart({
   id,
   title,
@@ -255,7 +283,7 @@ describe("ChartExportProvider", () => {
   it("builds a PDF from the same captured canvases", async () => {
     const user = userEvent.setup();
     const capture = vi.fn(async () => fakeCanvas());
-    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const buildPdf = vi.fn<BuildPdfDocument>(async () => new Blob(["pdf"]));
     const downloadFile = vi.fn();
 
     render(
@@ -285,7 +313,7 @@ describe("ChartExportProvider", () => {
   it("forwards extra text pages (e.g. cluster sizing recommendations) to the pdf builder", async () => {
     const user = userEvent.setup();
     const capture = vi.fn(async () => fakeCanvas());
-    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const buildPdf = vi.fn<BuildPdfDocument>(async () => new Blob(["pdf"]));
     const downloadFile = vi.fn();
     const extraPages = [
       {
@@ -320,7 +348,7 @@ describe("ChartExportProvider", () => {
 
   it("builds a PDF from extra text pages alone when no charts are registered", async () => {
     const user = userEvent.setup();
-    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const buildPdf = vi.fn<BuildPdfDocument>(async () => new Blob(["pdf"]));
     const downloadFile = vi.fn();
     const extraPages = [{ title: "Cluster sizing recommendations", items: [] }];
 
@@ -347,7 +375,7 @@ describe("ChartExportProvider", () => {
   it("builds HTML from the same captured canvases", async () => {
     const user = userEvent.setup();
     const capture = vi.fn(async () => fakeCanvas());
-    const buildHtml = vi.fn(async () => new Blob(["html"]));
+    const buildHtml = vi.fn<BuildChartDocument>(async () => new Blob(["html"]));
     const downloadFile = vi.fn();
 
     render(
@@ -397,24 +425,6 @@ describe("ChartExportProvider", () => {
     );
     const downloadFile = vi.fn();
 
-    function DropdownChart(): JSX.Element {
-      const [view, setView] = useState("a");
-      return (
-        <ChartExportSurface
-          id="vm"
-          title={view === "a" ? "View A" : "View B"}
-          exportViews={[
-            { id: "a", title: "View A" },
-            { id: "b", title: "View B" },
-          ]}
-          activeExportViewId={view}
-          onExportViewChange={setView}
-        >
-          <div data-testid="active-view">{view}</div>
-        </ChartExportSurface>
-      );
-    }
-
     render(
       <ChartExportProvider
         capture={capture}
@@ -473,11 +483,6 @@ describe("ChartExportProvider", () => {
     const user = userEvent.setup();
     vi.spyOn(console, "error").mockImplementation(() => undefined);
 
-    function ErrorText(): JSX.Element {
-      const exportApi = useChartExport();
-      return <div>{exportApi?.exportError}</div>;
-    }
-
     render(
       <ChartExportProvider
         capture={vi.fn(async () => {

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

@@ -189,19 +189,19 @@ describe("ClustersOverview", () => {
 
     expect(screen.queryByTestId("clusters-donut")).not.toBeInTheDocument();
     expect(screen.getByText("8")).toHaveStyle({
-      background: chart_color_blue_300.value,
+      backgroundColor: chart_color_blue_300.value,
     });
     expect(screen.getByText("4.25")).toHaveStyle({
-      background: chart_color_purple_300.value,
+      backgroundColor: chart_color_purple_300.value,
     });
     expect(screen.getByText("3.5")).toHaveStyle({
-      background: chart_color_purple_100.value,
+      backgroundColor: chart_color_purple_100.value,
     });
     expect(screen.getByText("2")).toHaveStyle({
-      background: chart_color_teal_200.value,
+      backgroundColor: chart_color_teal_200.value,
     });
     expect(screen.getByText("1")).toHaveStyle({
-      background: chart_color_yellow_400.value,
+      backgroundColor: chart_color_yellow_400.value,
     });
     expect(screen.queryByText("0.5")).not.toBeInTheDocument();
     expect(screen.getByText("Cluster 1 (8)")).toBeInTheDocument();