@openshift-migration-advisor/shared-components 0.28.0 → 0.29.0-623497c15eae

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 color="grey" isCompact icon={<TimesCircleIcon />}>
+    <Label
+      variant="outline"
+      isCompact
+      icon={
+        <Icon status="danger">
+          <TimesCircleIcon />
+        </Icon>
+      }
+    >
       Disabled
     </Label>
   );

package/src/report/OsUpgradeRecommendationPopover.tsx

@@ -4,13 +4,6 @@ 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,
-  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain:hover {
-    color: var(--pf-t--global--text--color--regular);
-  }
-`;
-
 const infoButtonStyle = css`
   padding: 0;
   vertical-align: middle;
@@ -24,7 +17,6 @@ export const OsUpgradeRecommendationPopover: FC<
   OsUpgradeRecommendationPopoverProps
 > = ({ upgradeRecommendation }) => (
   <Popover
-    className={upgradeRecommendationPopoverCloseButton}
     position="bottom"
     headerContent="Upgrade to get support"
     bodyContent={<div>{upgradeRecommendation}</div>}

package/src/report/ReportExportMenu.tsx

@@ -1,5 +1,7 @@
 import {
+  Divider,
   Dropdown,
+  DropdownGroup,
   DropdownItem,
   DropdownList,
   MenuToggle,
@@ -7,13 +9,41 @@ import {
   Spinner,
 } from "@patternfly/react-core";
 import { DownloadIcon } from "@patternfly/react-icons";
-import { type FC, type Ref, useState } from "react";
+import { type FC, type ReactNode, type Ref, useMemo, useState } from "react";
 import {
   type ReportExportOption,
+  type ReportExportSection,
   type StandardReportExportHandlers,
   standardReportExportOptions,
 } from "./reportExportOptions.js";
 
+function sectionGroupKey(section?: ReportExportSection): string | undefined {
+  return section?.id;
+}
+
+function groupExportOptions(options: ReportExportOption[]): {
+  section?: ReportExportSection;
+  options: ReportExportOption[];
+}[] {
+  const groups: {
+    section?: ReportExportSection;
+    options: ReportExportOption[];
+  }[] = [];
+
+  for (const option of options) {
+    const sectionKey = sectionGroupKey(option.section);
+    const last = groups.length > 0 ? groups[groups.length - 1] : undefined;
+    const lastKey = last ? sectionGroupKey(last.section) : undefined;
+    if (last && lastKey === sectionKey) {
+      last.options.push(option);
+    } else {
+      groups.push({ section: option.section, options: [option] });
+    }
+  }
+
+  return groups;
+}
+
 export interface ReportExportMenuProps {
   options: ReportExportOption[];
   isLoading?: boolean;
@@ -31,10 +61,44 @@ export const ReportExportMenu: FC<ReportExportMenuProps> = ({
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
+  const optionGroups = useMemo(() => groupExportOptions(options), [options]);
+
   if (options.length === 0) {
     return null;
   }
 
+  const menuItems: ReactNode[] = [];
+  optionGroups.forEach((group, index) => {
+    if (index > 0) {
+      const dividerKey =
+        group.section?.id ?? group.options[0]?.key ?? "ungrouped";
+      menuItems.push(
+        <Divider key={`divider-before-${dividerKey}`} component="li" />,
+      );
+    }
+
+    const items = group.options.map((option) => (
+      <DropdownItem
+        key={option.key}
+        isDisabled={option.isDisabled}
+        description={option.description}
+        onClick={option.onSelect}
+      >
+        {option.label}
+      </DropdownItem>
+    ));
+
+    if (group.section) {
+      menuItems.push(
+        <DropdownGroup key={group.section.id} label={group.section.label}>
+          {items}
+        </DropdownGroup>,
+      );
+    } else {
+      menuItems.push(...items);
+    }
+  });
+
   return (
     <Dropdown
       isOpen={isDropdownOpen}
@@ -70,18 +134,7 @@ export const ReportExportMenu: FC<ReportExportMenuProps> = ({
         </MenuToggle>
       )}
     >
-      <DropdownList>
-        {options.map((option) => (
-          <DropdownItem
-            key={option.key}
-            isDisabled={option.isDisabled}
-            description={option.description}
-            onClick={option.onSelect}
-          >
-            {option.label}
-          </DropdownItem>
-        ))}
-      </DropdownList>
+      <DropdownList>{menuItems}</DropdownList>
     </Dropdown>
   );
 };
@@ -94,6 +147,7 @@ export interface ExportReportButtonProps extends StandardReportExportHandlers {
   loadingLabel?: string | null;
   isDisabled?: boolean;
   toggleLabel?: string;
+  assessmentSectionLabel?: string;
 }
 
 export const ExportReportButton: FC<ExportReportButtonProps> = ({
@@ -101,6 +155,7 @@ export const ExportReportButton: FC<ExportReportButtonProps> = ({
   onExportPng,
   onExportHtml,
   extraOptions = [],
+  assessmentSectionLabel,
   ...menuProps
 }) => (
   <ReportExportMenu
@@ -109,6 +164,7 @@ export const ExportReportButton: FC<ExportReportButtonProps> = ({
         onExportPdf,
         onExportPng,
         onExportHtml,
+        assessmentSectionLabel,
       }),
       ...extraOptions,
     ]}