@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-1701f64050d7

package/src/report/OSDistribution.tsx

@@ -11,6 +11,8 @@ import {
   Select,
   SelectList,
   SelectOption,
+  Stack,
+  StackItem,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -19,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";
@@ -36,65 +41,60 @@ import {
   useOsBarChartViewModel,
 } from "./useOsBarChartViewModel.js";
 
-const filterToolbarStyle = css`
-  padding-left: 0;
-  padding-right: 0;
-`;
-
-const filterItemStyle = css`
-  flex: 1 1 0;
-  min-width: 0;
-`;
-
-const vmsColumnStyle = css`
-  text-align: right;
-`;
-
 const tableScrollStyle = css`
   overflow: auto;
+  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) {
@@ -105,10 +105,10 @@ export const OSBarChart: FC<OSBarChartProps> = ({
 
   return (
     <>
-      {!isExportMode ? (
-        <Toolbar className={filterToolbarStyle}>
+      <div {...chartExportHideProps}>
+        <Toolbar hasNoPadding>
           <ToolbarContent>
-            <ToolbarItem className={filterItemStyle}>
+            <ToolbarItem>
               <SearchInput
                 placeholder="Filter by OS"
                 value={vm.osFilter}
@@ -117,7 +117,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                 aria-label="Filter operating systems by name"
               />
             </ToolbarItem>
-            <ToolbarItem className={filterItemStyle}>
+            <ToolbarItem>
               <Select
                 isOpen={vm.isTierSelectOpen}
                 selected={vm.tierFilter}
@@ -128,7 +128,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                     ref={toggleRef}
                     isExpanded={vm.isTierSelectOpen}
                     onClick={vm.toggleTierSelectOpen}
-                    style={{ width: "100%" }}
+                    isFullWidth
                   >
                     {vm.tierFilterLabel}
                   </MenuToggle>
@@ -149,58 +149,55 @@ export const OSBarChart: FC<OSBarChartProps> = ({
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-      ) : null}
-
-      {vm.showUpgradeNotice ? <OsUpgradeNotice /> : null}
+      </div>
 
-      <div
-        className={isExportMode ? undefined : tableScrollStyle}
-        style={isExportMode ? undefined : { maxHeight: "350px" }}
-      >
-        <Table
-          aria-label="Operating systems"
-          variant="compact"
-          className={tableFullWidthStyle}
-        >
-          <Thead>
-            <Tr>
-              <Th>OS</Th>
-              <Th>Tier</Th>
-              <Th className={vmsColumnStyle}>VMs</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {vm.showNoResults ? (
-              <Tr>
-                <Td colSpan={3}>
-                  <EmptySearchResults title="No matching operating system found" />
-                </Td>
-              </Tr>
-            ) : (
-              vm.filteredRows.map((row) => (
-                <Tr key={row.osName}>
-                  <Td dataLabel="OS">
-                    <OsNameCell
-                      osName={row.osName}
-                      upgradeRecommendation={row.upgradeRecommendation}
-                      isExportMode={isExportMode}
-                    />
-                  </Td>
-                  <Td dataLabel="Tier">
-                    <SupportTierBadge
-                      tier={row.tier}
-                      isExportMode={isExportMode}
-                    />
-                  </Td>
-                  <Td dataLabel="VMs" className={vmsColumnStyle}>
-                    {row.count}
-                  </Td>
+      <Stack hasGutter>
+        {vm.showUpgradeNotice ? (
+          <StackItem>
+            <OsUpgradeNotice />
+          </StackItem>
+        ) : null}
+        <StackItem>
+          <div
+            className={`${tableScrollStyle} ${tableFullWidthStyle}`}
+            {...chartExportScrollProps}
+          >
+            <Table aria-label="Operating systems" variant="compact">
+              <Thead>
+                <Tr>
+                  <Th>OS</Th>
+                  <Th>Tier</Th>
+                  <Th>VMs</Th>
                 </Tr>
-              ))
-            )}
-          </Tbody>
-        </Table>
-      </div>
+              </Thead>
+              <Tbody>
+                {vm.showNoResults ? (
+                  <Tr>
+                    <Td colSpan={3}>
+                      <EmptySearchResults title="No matching operating system found" />
+                    </Td>
+                  </Tr>
+                ) : (
+                  vm.filteredRows.map((row) => (
+                    <Tr key={row.osName}>
+                      <Td dataLabel="OS">
+                        <OsNameCell
+                          osName={row.osName}
+                          upgradeRecommendation={row.upgradeRecommendation}
+                        />
+                      </Td>
+                      <Td dataLabel="Tier">
+                        <SupportTierBadge tier={row.tier} />
+                      </Td>
+                      <Td dataLabel="VMs">{row.count}</Td>
+                    </Tr>
+                  ))
+                )}
+              </Tbody>
+            </Table>
+          </div>
+        </StackItem>
+      </Stack>
     </>
   );
 };

package/src/report/OsSupportTiersHelpPopover.tsx

@@ -1,5 +1,10 @@
-import { css } from "@emotion/css";
-import { Label } from "@patternfly/react-core";
+import {
+  Button,
+  Content,
+  Label,
+  Stack,
+  StackItem,
+} from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 import {
@@ -11,67 +16,32 @@ import {
 } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
 
-const tierListStyle = css`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--400);
-`;
-
-const tierItemStyle = css`
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--100);
-`;
-
-const tierBadgeStyle = css`
-  width: fit-content;
-  max-width: 100%;
-  align-self: flex-start;
-`;
-
-const tierDescriptionStyle = css`
-  margin: 0;
-  color: var(--pf-t--global--text--color--regular);
-`;
-
-const learnMoreLinkStyle = css`
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pf-t--global--spacer--xs);
-  margin-top: var(--pf-t--global--spacer--400);
-`;
-
 const OsSupportTiersHelpBody: FC = () => (
-  <div>
-    <ul className={tierListStyle}>
-      {ORDERED_SUPPORT_TIERS.map((tier) => (
-        <li key={tier} className={tierItemStyle}>
-          <Label
-            className={tierBadgeStyle}
-            color={getSupportTierBadgeColor(tier)}
-            isCompact
-          >
-            {getSupportTierLegendLabel(tier)}
-          </Label>
-          <p className={tierDescriptionStyle}>
-            {getSupportTierDefinition(tier)}
-          </p>
-        </li>
-      ))}
-    </ul>
-    <a
-      aria-label="Learn more about operating system support tiers"
-      className={learnMoreLinkStyle}
-      href={SUPPORT_TIER_LEARN_MORE_URL}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Learn more <ExternalLinkAltIcon />
-    </a>
-  </div>
+  <Stack hasGutter>
+    {ORDERED_SUPPORT_TIERS.map((tier) => (
+      <StackItem key={tier}>
+        <Label color={getSupportTierBadgeColor(tier)} isCompact>
+          {getSupportTierLegendLabel(tier)}
+        </Label>
+        <Content component="p">{getSupportTierDefinition(tier)}</Content>
+      </StackItem>
+    ))}
+    <StackItem>
+      <Button
+        variant="link"
+        isInline
+        component="a"
+        href={SUPPORT_TIER_LEARN_MORE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<ExternalLinkAltIcon />}
+        iconPosition="end"
+        aria-label="Learn more about operating system support tiers"
+      >
+        Learn more
+      </Button>
+    </StackItem>
+  </Stack>
 );
 
 export const OsSupportTiersHelpPopover: FC = () => (

package/src/report/OsUpgradeNotice.tsx

@@ -1,17 +1,11 @@
-import { css } from "@emotion/css";
 import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 
-const noticeStyle = css`
-  margin-bottom: var(--pf-t--global--spacer--200);
-`;
-
 export const OsUpgradeNotice: FC = () => (
   <Flex
     alignItems={{ default: "alignItemsCenter" }}
     spaceItems={{ default: "spaceItemsSm" }}
-    className={noticeStyle}
   >
     <FlexItem>
       <Icon status="info">
@@ -19,7 +13,7 @@ export const OsUpgradeNotice: FC = () => (
       </Icon>
     </FlexItem>
     <FlexItem>
-      <Content component="p" style={{ fontWeight: 500 }}>
+      <Content component="p">
         Some operating systems may need upgrades before migration
       </Content>
     </FlexItem>

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

@@ -0,0 +1,86 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import type { FC, ReactNode } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  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 {
+  id: string;
+  title: string;
+  icon: ReactNode;
+  emptyTitle: string;
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  total: number;
+  subTitle: string;
+  itemsPerRow?: number;
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+export const PowerStateCard: FC<PowerStateCardProps> = ({
+  id,
+  title,
+  icon,
+  emptyTitle,
+  slices,
+  legend,
+  total,
+  subTitle,
+  itemsPerRow = 2,
+  legendVariant = "html",
+}) => (
+  <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";