@openshift-migration-advisor/shared-components 0.0.0

package/src/report/PopoverIcon.tsx

@@ -0,0 +1,46 @@
+import {
+  Button,
+  type ButtonProps,
+  Icon,
+  Popover,
+  type PopoverProps,
+} from "@patternfly/react-core";
+import { QuestionCircleIcon } from "@patternfly/react-icons";
+import type { CSSProperties, FC } from "react";
+
+type PopoverIconProps = PopoverProps & {
+  variant?: ButtonProps["variant"];
+  noVerticalAlign?: boolean;
+  buttonOuiaId?: string;
+  buttonStyle?: CSSProperties;
+};
+
+const PopoverIcon: FC<PopoverIconProps> = ({
+  variant = "plain",
+  noVerticalAlign = false,
+  buttonOuiaId,
+  buttonStyle,
+  "aria-label": ariaLabel,
+  ...props
+}) => (
+  <Popover {...props}>
+    <Button
+      icon={
+        <Icon isInline={noVerticalAlign}>
+          <QuestionCircleIcon />
+        </Icon>
+      }
+      variant={variant}
+      aria-label={ariaLabel}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      className="pf-v6-c-form__group-label-help pf-v6-u-p-0"
+      ouiaId={buttonOuiaId}
+      style={buttonStyle}
+    />
+  </Popover>
+);
+
+export default PopoverIcon;

package/src/report/SupportTierBadge.tsx

@@ -0,0 +1,55 @@
+import { css } from "@emotion/css";
+import { Label, Tooltip } from "@patternfly/react-core";
+import type { FC } from "react";
+import {
+  getSupportTierBadgeColor,
+  getSupportTierBadgeInlineStyle,
+  getSupportTierDefinition,
+  getSupportTierLegendLabel,
+  type SupportTier,
+} from "./osSupportTier.js";
+
+const exportBadgeStyle = css`
+  display: inline-block;
+  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
+  border-radius: var(--pf-t--global--border--radius--pill);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  line-height: var(--pf-t--global--font--line-height--body);
+  white-space: nowrap;
+`;
+
+interface SupportTierBadgeProps {
+  tier: SupportTier;
+  isExportMode?: boolean;
+}
+
+const ExportSupportTierBadge: FC<{ tier: SupportTier }> = ({ tier }) => {
+  const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
+
+  return (
+    <span className={exportBadgeStyle} style={{ backgroundColor, color }}>
+      {getSupportTierLegendLabel(tier)}
+    </span>
+  );
+};
+
+export const SupportTierBadge: FC<SupportTierBadgeProps> = ({
+  tier,
+  isExportMode = false,
+}) => {
+  if (isExportMode) {
+    return <ExportSupportTierBadge tier={tier} />;
+  }
+
+  return (
+    <Tooltip content={getSupportTierDefinition(tier)}>
+      <span>
+        <Label color={getSupportTierBadgeColor(tier)} isCompact>
+          {getSupportTierLegendLabel(tier)}
+        </Label>
+      </span>
+    </Tooltip>
+  );
+};
+
+SupportTierBadge.displayName = "SupportTierBadge";

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

@@ -0,0 +1,236 @@
+import "@testing-library/jest-dom";
+
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { OSBarChart, OSDistribution } from "../OSDistribution.js";
+import { SUPPORT_TIER_DEFINITIONS, SupportTier } from "../osSupportTier.js";
+
+const sampleOsData = {
+  "Red Hat Enterprise Linux 9 (64-bit)": {
+    count: 5,
+    supported: true,
+    supportTier: SupportTier.Certified,
+    upgradeRecommendation: "",
+  },
+  "Ubuntu Linux 22.04 (64-bit)": {
+    count: 3,
+    supported: true,
+    supportTier: SupportTier.VendorSupported,
+    upgradeRecommendation: "",
+  },
+  "CentOS 7 (64-bit)": {
+    count: 2,
+    supported: false,
+    supportTier: SupportTier.SpecialHandling,
+    upgradeRecommendation: "Upgrade to RHEL 7",
+  },
+};
+
+describe("OSBarChart", () => {
+  it("renders operating systems in a table sorted by support tier", () => {
+    render(<OSBarChart osData={sampleOsData} />);
+
+    const rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Red Hat Enterprise Linux 9 (64-bit)");
+    expect(rows[0]).toHaveTextContent("Certified");
+    expect(rows[0]).toHaveTextContent("5");
+    expect(rows[1]).toHaveTextContent("Ubuntu Linux 22.04 (64-bit)");
+    expect(rows[2]).toHaveTextContent("CentOS 7 (64-bit)");
+    expect(rows[2]).toHaveTextContent("Special handling");
+  });
+
+  it("sorts by tier before VM count", () => {
+    render(
+      <OSBarChart
+        osData={{
+          "CentOS 7 (64-bit)": {
+            count: 100,
+            supported: false,
+            supportTier: SupportTier.SpecialHandling,
+            upgradeRecommendation: "",
+          },
+          "Red Hat Enterprise Linux 9 (64-bit)": {
+            count: 1,
+            supported: true,
+            supportTier: SupportTier.Certified,
+            upgradeRecommendation: "",
+          },
+        }}
+      />,
+    );
+
+    const rows = screen.getAllByRole("row").slice(1);
+    expect(rows[0]).toHaveTextContent("Red Hat Enterprise Linux 9 (64-bit)");
+    expect(rows[1]).toHaveTextContent("CentOS 7 (64-bit)");
+  });
+
+  it("shows upgrade recommendation details next to the operating system", async () => {
+    const user = userEvent.setup();
+
+    render(<OSBarChart osData={sampleOsData} />);
+
+    const upgradeButton = screen.getByRole("button", {
+      name: "Open operating system upgrade information",
+    });
+    await user.click(upgradeButton);
+
+    const popover = await screen.findByRole("dialog");
+    expect(
+      within(popover).getByText("Upgrade to get support"),
+    ).toBeInTheDocument();
+    expect(within(popover).getByText("Upgrade to RHEL 7")).toBeInTheDocument();
+  });
+
+  it("does not show upgrade recommendation icon in export mode", () => {
+    render(<OSBarChart osData={sampleOsData} isExportMode />);
+
+    expect(
+      screen.queryByRole("button", {
+        name: "Open operating system upgrade information",
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows official Red Hat definitions in tier badge tooltips", async () => {
+    const user = userEvent.setup();
+
+    render(<OSBarChart osData={sampleOsData} />);
+
+    const certifiedBadge = screen.getByText("Certified");
+    await user.hover(certifiedBadge);
+
+    expect(
+      await screen.findByText(SUPPORT_TIER_DEFINITIONS[SupportTier.Certified]),
+    ).toBeInTheDocument();
+  });
+
+  it("filters operating systems by name", async () => {
+    const user = userEvent.setup();
+
+    render(<OSBarChart osData={sampleOsData} />);
+
+    await user.type(screen.getByPlaceholderText("Filter by OS"), "Ubuntu");
+
+    expect(screen.getByText("Ubuntu Linux 22.04 (64-bit)")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Red Hat Enterprise Linux 9 (64-bit)"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("filters operating systems by support tier", async () => {
+    const user = userEvent.setup();
+
+    render(<OSBarChart osData={sampleOsData} />);
+
+    await user.click(screen.getByRole("button", { name: /filter by tier/i }));
+    await user.click(screen.getByRole("option", { name: "Special handling" }));
+
+    expect(screen.getByText("CentOS 7 (64-bit)")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Red Hat Enterprise Linux 9 (64-bit)"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows an empty state when filters match no operating systems", async () => {
+    const user = userEvent.setup();
+
+    render(<OSBarChart osData={sampleOsData} />);
+
+    await user.type(screen.getByPlaceholderText("Filter by OS"), "ccc");
+
+    expect(
+      screen.getByText("No matching operating system found"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "To continue, adjust your search or filters and try again",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders export-friendly inline tier badge colors in export mode", () => {
+    render(<OSBarChart osData={sampleOsData} isExportMode />);
+
+    const certifiedBadge = screen.getByText("Certified");
+    expect(certifiedBadge.tagName).toBe("SPAN");
+    expect(certifiedBadge).toHaveStyle({
+      backgroundColor: "rgb(185, 218, 252)",
+      color: "rgb(0, 77, 153)",
+    });
+  });
+
+  it("shows empty state when no operating systems are available", () => {
+    render(<OSBarChart osData={{}} />);
+
+    expect(
+      screen.getByText("Operating system data not collected"),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("OSDistribution", () => {
+  it("shows the guest OS support tiers help popover", async () => {
+    const user = userEvent.setup();
+
+    render(<OSDistribution osData={sampleOsData} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Guest OS support tiers help" }),
+    );
+
+    const popover = await screen.findByRole("dialog");
+    expect(
+      within(popover).getByText("Guest OS support tiers"),
+    ).toBeInTheDocument();
+    expect(within(popover).getByText("Certified")).toBeInTheDocument();
+    expect(
+      within(popover).getByText("Commercial Vendor Supported"),
+    ).toBeInTheDocument();
+    expect(
+      within(popover).getByRole("link", { name: /learn more/i }),
+    ).toHaveAttribute("href", "https://access.redhat.com/articles/4234591");
+  });
+
+  it("shows the upgrade notice when non-certified operating systems are present", () => {
+    render(
+      <OSDistribution
+        osData={{
+          "CentOS 7 (64-bit)": {
+            count: 2,
+            supported: false,
+            supportTier: SupportTier.SpecialHandling,
+            upgradeRecommendation: "",
+          },
+        }}
+      />,
+    );
+
+    expect(
+      screen.getByText(
+        "Some operating systems may need upgrades before migration",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show the upgrade notice when all operating systems are certified", () => {
+    render(
+      <OSDistribution
+        osData={{
+          "Red Hat Enterprise Linux 9 (64-bit)": {
+            count: 5,
+            supported: true,
+            supportTier: SupportTier.Certified,
+            upgradeRecommendation: "",
+          },
+        }}
+      />,
+    );
+
+    expect(
+      screen.queryByText(
+        "Some operating systems may need upgrades before migration",
+      ),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getSupportTierBadgeInlineStyle,
+  getSupportTierDefinition,
+  getSupportTierLegendLabel,
+  getSupportTierSortOrder,
+  hasOsUpgradeNotice,
+  resolveSupportTier,
+  SUPPORT_TIER_DEFINITIONS,
+  SupportTier,
+} from "../osSupportTier.js";
+
+describe("osSupportTier", () => {
+  it("maps API tier values to display labels", () => {
+    expect(getSupportTierLegendLabel(SupportTier.Certified)).toBe("Certified");
+    expect(getSupportTierLegendLabel(SupportTier.VendorSupported)).toBe(
+      "Commercial Vendor Supported",
+    );
+    expect(getSupportTierLegendLabel(SupportTier.CommunitySupported)).toBe(
+      "Community supported",
+    );
+    expect(getSupportTierLegendLabel(SupportTier.SpecialHandling)).toBe(
+      "Special handling",
+    );
+  });
+
+  it("orders tiers from best to worst support", () => {
+    expect(getSupportTierSortOrder(SupportTier.Certified)).toBeLessThan(
+      getSupportTierSortOrder(SupportTier.VendorSupported),
+    );
+    expect(getSupportTierSortOrder(SupportTier.VendorSupported)).toBeLessThan(
+      getSupportTierSortOrder(SupportTier.CommunitySupported),
+    );
+    expect(
+      getSupportTierSortOrder(SupportTier.CommunitySupported),
+    ).toBeLessThan(getSupportTierSortOrder(SupportTier.SpecialHandling));
+  });
+
+  it("uses support tier when present", () => {
+    expect(resolveSupportTier(SupportTier.CommunitySupported, true)).toBe(
+      SupportTier.CommunitySupported,
+    );
+  });
+
+  it("falls back to certified when supportTier is missing and supported is true", () => {
+    expect(resolveSupportTier(undefined, true)).toBe(SupportTier.Certified);
+  });
+
+  it("falls back to special handling when supportTier is missing and supported is false", () => {
+    expect(resolveSupportTier(undefined, false)).toBe(
+      SupportTier.SpecialHandling,
+    );
+  });
+
+  it("provides official Red Hat definitions for each support tier", () => {
+    expect(getSupportTierDefinition(SupportTier.Certified)).toBe(
+      SUPPORT_TIER_DEFINITIONS[SupportTier.Certified],
+    );
+    expect(getSupportTierDefinition(SupportTier.VendorSupported)).toContain(
+      "commercial vendor supported guest operating system",
+    );
+    expect(getSupportTierDefinition(SupportTier.CommunitySupported)).toContain(
+      "community channels",
+    );
+    expect(getSupportTierDefinition(SupportTier.SpecialHandling)).toContain(
+      "third-party software support policy",
+    );
+  });
+
+  it("provides explicit inline badge colors for PDF export", () => {
+    expect(getSupportTierBadgeInlineStyle(SupportTier.Certified)).toEqual({
+      backgroundColor: "#b9dafc",
+      color: "#004d99",
+    });
+  });
+
+  it("detects when the upgrade notice should be shown", () => {
+    expect(
+      hasOsUpgradeNotice({
+        "Red Hat Enterprise Linux 9 (64-bit)": {
+          count: 1,
+          supported: true,
+          supportTier: SupportTier.Certified,
+          upgradeRecommendation: "",
+        },
+      }),
+    ).toBe(false);
+
+    expect(
+      hasOsUpgradeNotice({
+        "CentOS 7 (64-bit)": {
+          count: 1,
+          supported: false,
+          supportTier: SupportTier.SpecialHandling,
+          upgradeRecommendation: "",
+        },
+      }),
+    ).toBe(true);
+  });
+});

package/src/report/constants.ts

@@ -0,0 +1,14 @@
+import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_color_blue_300";
+import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_color_yellow_300";
+
+/**
+ * PatternFly chart color semantics (https://www.patternfly.org/charts/colors-for-charts/design-guidelines/#best-practices):
+ *   Blue  → success / migratable / supported
+ *   Red-orange → failure / non-migratable / unsupported
+ */
+export const chartColorSuccess = chart_color_blue_300.value;
+export const chartColorFailure = chart_color_yellow_300.value;
+
+export const REPORT_CARD_EMPTY_STATE_TITLES = {
+  operatingSystems: "Operating system data not collected",
+} as const;

package/src/report/dashboardStyles.ts

@@ -0,0 +1,116 @@
+import { css } from "@emotion/css";
+
+export const dashboardStyles = {
+  cardClip: css`
+    clip-path: inset(0 round 10px);
+    background: #fff;
+    height: 100%;
+    width: 100%;
+  `,
+
+  cardScroll: css`
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+  `,
+
+  equalHeightRow: css`
+    display: flex;
+    gap: var(--pf-t--global--spacer--gap--group--horizontal);
+    align-items: stretch;
+  `,
+
+  equalHeight: css`
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    height: 100%;
+  `,
+
+  cardBodyScrollable: css`
+    overflow: auto;
+  `,
+
+  // `!important` on overflow: PatternFly sets `.pf-v6-c-card { overflow: auto }`
+  // 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%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden !important;
+  `,
+
+  cardPrint: css`
+    border: 1px solid #d2d2d2 !important;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    min-height: unset;
+    max-height: unset;
+    page-break-inside: avoid;
+  `,
+
+  storageCardOverflowHidden: css`
+    overflow: hidden;
+  `,
+
+  storageCardOverflowVisible: css`
+    overflow: visible;
+  `,
+
+  storageChartWrapper: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 20px 0;
+  `,
+
+  storageExportSectionMargin: css`
+    margin-bottom: 24px;
+  `,
+
+  storageExportSectionTitle: css`
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  `,
+
+  storageFlexFullWidth: css`
+    width: 100%;
+  `,
+
+  storageMenuToggleMinWidth: css`
+    min-width: 200px;
+  `,
+
+  storageNoDataContainer: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 250px;
+    font-size: 16px;
+    color: #6a6e73;
+  `,
+
+  storageTotalsNote: css`
+    margin-top: 12px;
+    color: #6a6e73;
+    font-style: italic;
+    text-align: center;
+  `,
+};
+
+export const tableFullWidthStyle = css`
+  margin-inline: calc(-1 * var(--pf-v6-c-card--child--PaddingInlineStart));
+  width: calc(
+    100% + var(--pf-v6-c-card--child--PaddingInlineStart) +
+      var(--pf-v6-c-card--child--PaddingInlineEnd)
+  );
+`;

package/src/report/index.ts

@@ -0,0 +1,54 @@
+export {
+  CARD_EMPTY_STATE_DESCRIPTION,
+  CardEmptyState,
+  type CardEmptyStateProps,
+} from "./CardEmptyState.js";
+export {
+  chartColorFailure,
+  chartColorSuccess,
+  REPORT_CARD_EMPTY_STATE_TITLES,
+} from "./constants.js";
+export {
+  DashboardEmptyStateBase,
+  type DashboardEmptyStateBaseProps,
+} from "./DashboardEmptyStateBase.js";
+export { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
+export {
+  EmptySearchResults,
+  type EmptySearchResultsProps,
+} from "./EmptySearchResults.js";
+export { OSBarChart, OSDistribution } from "./OSDistribution.js";
+export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
+export { OsUpgradeNotice } from "./OsUpgradeNotice.js";
+export {
+  OsNameCell,
+  OsUpgradeRecommendationPopover,
+} from "./OsUpgradeRecommendationPopover.js";
+export type {
+  OSDistributionEntry,
+  SupportTierBadgeStyle,
+} from "./osSupportTier.js";
+export {
+  getSupportTierBadgeColor,
+  getSupportTierBadgeInlineStyle,
+  getSupportTierDefinition,
+  getSupportTierLegendLabel,
+  getSupportTierSortOrder,
+  hasOsUpgradeNotice,
+  ORDERED_SUPPORT_TIERS,
+  resolveSupportTier,
+  SUPPORT_TIER_BADGE_COLORS,
+  SUPPORT_TIER_BADGE_INLINE_STYLES,
+  SUPPORT_TIER_DEFINITIONS,
+  SUPPORT_TIER_LABELS,
+  SUPPORT_TIER_LEARN_MORE_URL,
+  SupportTier,
+} from "./osSupportTier.js";
+export { default as PopoverIcon } from "./PopoverIcon.js";
+export { SupportTierBadge } from "./SupportTierBadge.js";
+export {
+  ALL_TIERS_FILTER,
+  type OsBarChartViewModel,
+  type OsTableRow,
+  useOsBarChartViewModel,
+} from "./useOsBarChartViewModel.js";