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

package/src/report/OSDistribution.tsx

@@ -21,6 +21,9 @@ import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import type { FC, Ref } from "react";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportHideProps, chartExportScrollProps } from "./chartExport.js";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 import { EmptySearchResults } from "./EmptySearchResults.js";
@@ -43,47 +46,55 @@ const tableScrollStyle = css`
   max-height: 350px;
 `;
 
+const OS_DISTRIBUTION_CHART_ID = "os-distribution";
+const OS_DISTRIBUTION_TITLE = "Operating system distribution";
+
 interface OSDistributionProps {
   osData: Record<string, OSDistributionEntry>;
-  isExportMode?: boolean;
 }
 
-export const OSDistribution: FC<OSDistributionProps> = ({
-  osData,
-  isExportMode = false,
-}) => (
-  <Card
-    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
-    id="os-distribution"
+export const OSDistribution: FC<OSDistributionProps> = ({ osData }) => (
+  <ChartExportSurface
+    id={OS_DISTRIBUTION_CHART_ID}
+    title={OS_DISTRIBUTION_TITLE}
   >
-    <CardTitle>
-      <Flex
-        alignItems={{ default: "alignItemsCenter" }}
-        spaceItems={{ default: "spaceItemsSm" }}
-      >
-        <FlexItem>
-          <DesktopIcon /> Operating Systems
-        </FlexItem>
-        <FlexItem>
-          <OsSupportTiersHelpPopover />
-        </FlexItem>
-      </Flex>
-    </CardTitle>
-    <CardBody>
-      <OSBarChart osData={osData} isExportMode={isExportMode} />
-    </CardBody>
-  </Card>
+    <Card className={dashboardStyles.card}>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>
+            <Flex
+              alignItems={{ default: "alignItemsCenter" }}
+              spaceItems={{ default: "spaceItemsSm" }}
+            >
+              <FlexItem>
+                <DesktopIcon /> Operating Systems
+              </FlexItem>
+              <FlexItem {...chartExportHideProps}>
+                <OsSupportTiersHelpPopover />
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+          <ChartHeaderActions
+            chartId={OS_DISTRIBUTION_CHART_ID}
+            title={OS_DISTRIBUTION_TITLE}
+          />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        <OSBarChart osData={osData} />
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
 );
 
 interface OSBarChartProps {
   osData: Record<string, OSDistributionEntry>;
-  isExportMode?: boolean;
 }
 
-export const OSBarChart: FC<OSBarChartProps> = ({
-  osData,
-  isExportMode = false,
-}) => {
+export const OSBarChart: FC<OSBarChartProps> = ({ osData }) => {
   const vm = useOsBarChartViewModel(osData);
 
   if (vm.tableRows.length === 0) {
@@ -94,7 +105,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
 
   return (
     <>
-      {!isExportMode ? (
+      <div {...chartExportHideProps}>
         <Toolbar hasNoPadding>
           <ToolbarContent>
             <ToolbarItem>
@@ -138,7 +149,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-      ) : null}
+      </div>
 
       <Stack hasGutter>
         {vm.showUpgradeNotice ? (
@@ -148,11 +159,8 @@ export const OSBarChart: FC<OSBarChartProps> = ({
         ) : null}
         <StackItem>
           <div
-            className={
-              isExportMode
-                ? tableFullWidthStyle
-                : `${tableScrollStyle} ${tableFullWidthStyle}`
-            }
+            className={`${tableScrollStyle} ${tableFullWidthStyle}`}
+            {...chartExportScrollProps}
           >
             <Table aria-label="Operating systems" variant="compact">
               <Thead>
@@ -176,14 +184,10 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                         <OsNameCell
                           osName={row.osName}
                           upgradeRecommendation={row.upgradeRecommendation}
-                          isExportMode={isExportMode}
                         />
                       </Td>
                       <Td dataLabel="Tier">
-                        <SupportTierBadge
-                          tier={row.tier}
-                          isExportMode={isExportMode}
-                        />
+                        <SupportTierBadge tier={row.tier} />
                       </Td>
                       <Td dataLabel="VMs">{row.count}</Td>
                     </Tr>

package/src/report/OsUpgradeRecommendationPopover.tsx

@@ -2,6 +2,7 @@ import { css } from "@emotion/css";
 import { Button, Flex, FlexItem, Popover } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
+import { chartExportHideProps } from "./chartExport.js";
 
 const upgradeRecommendationPopoverCloseButton = css`
   .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
@@ -44,18 +45,16 @@ OsUpgradeRecommendationPopover.displayName = "OsUpgradeRecommendationPopover";
 interface OsNameCellProps {
   osName: string;
   upgradeRecommendation?: string;
-  isExportMode?: boolean;
 }
 
 export const OsNameCell: FC<OsNameCellProps> = ({
   osName,
   upgradeRecommendation,
-  isExportMode = false,
 }) => {
   const hasUpgradeRecommendation =
     upgradeRecommendation && upgradeRecommendation.trim() !== "";
 
-  if (!hasUpgradeRecommendation || isExportMode) {
+  if (!hasUpgradeRecommendation) {
     return <>{osName}</>;
   }
 
@@ -66,7 +65,7 @@ export const OsNameCell: FC<OsNameCellProps> = ({
       flexWrap={{ default: "nowrap" }}
     >
       <FlexItem>{osName}</FlexItem>
-      <FlexItem shrink={{ default: "shrink" }}>
+      <FlexItem shrink={{ default: "shrink" }} {...chartExportHideProps}>
         <OsUpgradeRecommendationPopover
           upgradeRecommendation={upgradeRecommendation}
         />

package/src/report/PowerStateCard.tsx

@@ -1,4 +1,10 @@
-import { Card, CardBody, CardTitle } from "@patternfly/react-core";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
 import type { FC, ReactNode } from "react";
 import {
   MigrationDonutChart,
@@ -6,6 +12,8 @@ import {
   type MigrationDonutChartLegendVariant,
 } from "../charts/MigrationDonutChart.js";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
 import { dashboardStyles } from "./dashboardStyles.js";
 
 export interface PowerStateCardProps {
@@ -17,7 +25,6 @@ export interface PowerStateCardProps {
   legend: Record<string, string>;
   total: number;
   subTitle: string;
-  isExportMode?: boolean;
   itemsPerRow?: number;
   legendVariant?: MigrationDonutChartLegendVariant;
 }
@@ -31,43 +38,49 @@ export const PowerStateCard: FC<PowerStateCardProps> = ({
   legend,
   total,
   subTitle,
-  isExportMode = false,
   itemsPerRow = 2,
   legendVariant = "html",
 }) => (
-  <Card
-    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
-    id={id}
-  >
-    <CardTitle>
-      {icon} {title}
-    </CardTitle>
-    <CardBody>
-      {total === 0 ? (
-        <CardEmptyState title={emptyTitle} />
-      ) : (
-        <MigrationDonutChart
-          legendVariant={legendVariant}
-          data={slices}
-          legend={legend}
-          height={300}
-          width={420}
-          donutThickness={18}
-          padAngle={1}
-          title={`${total}`}
-          subTitle={subTitle}
-          subTitleColor="var(--pf-t--global--text--color--subtle)"
-          titleFontSize={34}
-          labelFontSize={16}
-          itemsPerRow={itemsPerRow}
-          marginLeft="0%"
-          tooltipLabelFormatter={({ datum, percent }) =>
-            `${datum.countDisplay}\n${percent.toFixed(1)}%`
-          }
-        />
-      )}
-    </CardBody>
-  </Card>
+  <ChartExportSurface id={id} title={title}>
+    <Card className={dashboardStyles.card}>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>
+            {icon} {title}
+          </FlexItem>
+          <ChartHeaderActions chartId={id} title={title} />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        {total === 0 ? (
+          <CardEmptyState title={emptyTitle} />
+        ) : (
+          <MigrationDonutChart
+            legendVariant={legendVariant}
+            data={slices}
+            legend={legend}
+            height={300}
+            width={420}
+            donutThickness={18}
+            padAngle={1}
+            title={`${total}`}
+            subTitle={subTitle}
+            subTitleColor="var(--pf-t--global--text--color--subtle)"
+            titleFontSize={34}
+            labelFontSize={16}
+            itemsPerRow={itemsPerRow}
+            marginLeft="0%"
+            tooltipLabelFormatter={({ datum, percent }) =>
+              `${datum.countDisplay}\n${percent.toFixed(1)}%`
+            }
+          />
+        )}
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
 );
 
 PowerStateCard.displayName = "PowerStateCard";

package/src/report/ReportExportMenu.tsx

@@ -0,0 +1,119 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  type MenuToggleElement,
+  Spinner,
+} from "@patternfly/react-core";
+import { DownloadIcon } from "@patternfly/react-icons";
+import { type FC, type Ref, useState } from "react";
+import {
+  type ReportExportOption,
+  type StandardReportExportHandlers,
+  standardReportExportOptions,
+} from "./reportExportOptions.js";
+
+export interface ReportExportMenuProps {
+  options: ReportExportOption[];
+  isLoading?: boolean;
+  loadingLabel?: string | null;
+  isDisabled?: boolean;
+  toggleLabel?: string;
+}
+
+export const ReportExportMenu: FC<ReportExportMenuProps> = ({
+  options,
+  isLoading = false,
+  loadingLabel = null,
+  isDisabled = false,
+  toggleLabel = "Export",
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <Dropdown
+      isOpen={isDropdownOpen}
+      popperProps={{
+        placement: "bottom-end",
+        preventOverflow: true,
+      }}
+      onSelect={() => {
+        setIsDropdownOpen(false);
+      }}
+      onOpenChange={(isOpen: boolean) => {
+        setIsDropdownOpen(isOpen);
+      }}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => {
+            setIsDropdownOpen((open) => !open);
+          }}
+          isExpanded={isDropdownOpen}
+          variant="secondary"
+          isDisabled={isLoading || isDisabled}
+          aria-label="Export report options"
+          icon={
+            isLoading ? (
+              <Spinner size="sm" aria-hidden="true" />
+            ) : (
+              <DownloadIcon aria-hidden="true" />
+            )
+          }
+        >
+          {isLoading ? (loadingLabel ?? "Generating...") : toggleLabel}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        {options.map((option) => (
+          <DropdownItem
+            key={option.key}
+            isDisabled={option.isDisabled}
+            description={option.description}
+            onClick={option.onSelect}
+          >
+            {option.label}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+ReportExportMenu.displayName = "ReportExportMenu";
+
+export interface ExportReportButtonProps extends StandardReportExportHandlers {
+  extraOptions?: ReportExportOption[];
+  isLoading?: boolean;
+  loadingLabel?: string | null;
+  isDisabled?: boolean;
+  toggleLabel?: string;
+}
+
+export const ExportReportButton: FC<ExportReportButtonProps> = ({
+  onExportPdf,
+  onExportPng,
+  onExportHtml,
+  extraOptions = [],
+  ...menuProps
+}) => (
+  <ReportExportMenu
+    options={[
+      ...standardReportExportOptions({
+        onExportPdf,
+        onExportPng,
+        onExportHtml,
+      }),
+      ...extraOptions,
+    ]}
+    {...menuProps}
+  />
+);
+
+ExportReportButton.displayName = "ExportReportButton";

package/src/report/ReportTable.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import type React from "react";
+import { tableFullWidthStyle } from "./dashboardStyles.js";
+
+export interface ReportTableProps<DataItem> {
+  columns: string[];
+  data: DataItem[];
+  fields: Array<keyof DataItem>;
+  caption?: string;
+  onRowClick?: (item: DataItem) => void;
+  clickableFields?: Array<keyof DataItem>;
+}
+
+export function ReportTable<DataItem>(
+  props: ReportTableProps<DataItem>,
+): React.ReactNode {
+  const {
+    columns,
+    data,
+    fields,
+    caption,
+    onRowClick,
+    clickableFields = [],
+  } = props;
+
+  const renderCell = (
+    item: DataItem,
+    field: keyof DataItem,
+  ): React.ReactNode => {
+    const value = item[field];
+
+    if (value === "" || value == null) {
+      return "-";
+    }
+
+    if (typeof value === "boolean") {
+      return value ? "True" : "False";
+    }
+
+    // Make field clickable if specified
+    if (clickableFields.includes(field) && onRowClick) {
+      return (
+        <Button
+          variant="link"
+          isInline
+          onClick={() => onRowClick(item)}
+          style={{ padding: 0, fontSize: "inherit" }}
+        >
+          {value as React.ReactNode}
+        </Button>
+      );
+    }
+
+    return value as React.ReactNode;
+  };
+
+  return (
+    <Table variant="compact" borders={false} className={tableFullWidthStyle}>
+      {caption && <caption>{caption}</caption>}
+      <Thead>
+        <Tr>
+          {columns.map((name) => (
+            <Th key={name}>{name}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.map((item) => (
+          <Tr key={`row-${String(item[fields[0]])}`}>
+            {fields.map((f) => (
+              <Td key={String(f)}>{renderCell(item, f)}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+}
+
+ReportTable.displayName = "ReportTable";

package/src/report/SupportTierBadge.tsx

@@ -1,4 +1,3 @@
-import { css } from "@emotion/css";
 import { Label, Tooltip } from "@patternfly/react-core";
 import type { FC } from "react";
 import {
@@ -9,49 +8,22 @@ import {
   type SupportTier,
 } from "./osSupportTier.js";
 
-const exportBadgeStyle = (backgroundColor: string, color: string) => 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;
-  background-color: ${backgroundColor};
-  color: ${color};
-`;
-
 interface SupportTierBadgeProps {
   tier: SupportTier;
-  isExportMode?: boolean;
 }
 
-const ExportSupportTierBadge: FC<{ tier: SupportTier }> = ({ tier }) => {
-  const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
-
-  return (
-    <span className={exportBadgeStyle(backgroundColor, color)}>
-      {getSupportTierLegendLabel(tier)}
+export const SupportTierBadge: FC<SupportTierBadgeProps> = ({ tier }) => (
+  <Tooltip content={getSupportTierDefinition(tier)}>
+    <span>
+      <Label
+        color={getSupportTierBadgeColor(tier)}
+        isCompact
+        style={getSupportTierBadgeInlineStyle(tier)}
+      >
+        {getSupportTierLegendLabel(tier)}
+      </Label>
     </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>
-  );
-};
+  </Tooltip>
+);
 
 SupportTierBadge.displayName = "SupportTierBadge";

package/src/report/VCenterClusterDetails.tsx

@@ -8,6 +8,8 @@ import {
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
+  Flex,
+  FlexItem,
   Grid,
   GridItem,
   Label,
@@ -15,6 +17,9 @@ import {
 } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import type { FC } from "react";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportScrollProps } from "./chartExport.js";
 import { FeatureStatusBadge } from "./FeatureStatusBadge.js";
 import type {
   ClusterDetailRow,
@@ -26,7 +31,6 @@ export interface VCenterClusterDetailsProps {
   isAggregateView: boolean;
   rows: ClusterDetailRow[];
   details?: ClusterDetailsModel;
-  isExportMode?: boolean;
 }
 
 const clusterDetailsTableScrollStyle = css`
@@ -91,16 +95,16 @@ const AggregateClusterTable: FC<{
 
 const AggregateCluster: FC<{
   rows: ClusterDetailRow[];
-  isExportMode: boolean;
-}> = ({ rows, isExportMode }) => {
+}> = ({ rows }) => {
   if (rows.length === 0) {
     return <Content component="p">No vSphere clusters detected</Content>;
   }
 
   return (
     <div
-      className={isExportMode ? undefined : clusterDetailsTableScrollStyle}
-      data-scroll-constrained={isExportMode ? undefined : "true"}
+      className={clusterDetailsTableScrollStyle}
+      data-scroll-constrained="true"
+      {...chartExportScrollProps}
     >
       <AggregateClusterTable rows={rows} />
     </div>
@@ -190,22 +194,40 @@ const DetailedClusterView: FC<{ details: ClusterDetailsModel }> = ({
   </Grid>
 );
 
+const CLUSTER_DETAILS_CHART_ID = "vcenter-cluster-details";
+const CLUSTER_DETAILS_TITLE = "vCenter cluster details";
+
 export const VCenterClusterDetails: FC<VCenterClusterDetailsProps> = ({
   isAggregateView,
   rows,
   details,
-  isExportMode = false,
 }) => (
-  <Card isFullHeight id="vcenter-cluster-details">
-    <CardTitle>vCenter cluster details</CardTitle>
-    <CardBody>
-      {isAggregateView || !details ? (
-        <AggregateCluster rows={rows} isExportMode={isExportMode} />
-      ) : (
-        <DetailedClusterView details={details} />
-      )}
-    </CardBody>
-  </Card>
+  <ChartExportSurface
+    id={CLUSTER_DETAILS_CHART_ID}
+    title={CLUSTER_DETAILS_TITLE}
+  >
+    <Card isFullHeight>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>{CLUSTER_DETAILS_TITLE}</FlexItem>
+          <ChartHeaderActions
+            chartId={CLUSTER_DETAILS_CHART_ID}
+            title={CLUSTER_DETAILS_TITLE}
+          />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        {isAggregateView || !details ? (
+          <AggregateCluster rows={rows} />
+        ) : (
+          <DetailedClusterView details={details} />
+        )}
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
 );
 
 VCenterClusterDetails.displayName = "VCenterClusterDetails";

package/src/report/VmPowerStates.tsx

@@ -8,13 +8,11 @@ import { buildVmPowerStateChart } from "./powerStates.js";
 
 export interface VmPowerStatesProps {
   powerStates?: Record<string, number>;
-  isExportMode?: boolean;
   legendVariant?: MigrationDonutChartLegendVariant;
 }
 
 export const VmPowerStates: FC<VmPowerStatesProps> = ({
   powerStates,
-  isExportMode = false,
   legendVariant,
 }) => {
   const chart = useMemo(
@@ -32,7 +30,6 @@ export const VmPowerStates: FC<VmPowerStatesProps> = ({
       legend={chart.legend}
       total={chart.total}
       subTitle="VMs"
-      isExportMode={isExportMode}
       legendVariant={legendVariant}
     />
   );