feat(web): Migration to PatternFly 6, round 1

web/package.json

@@ -107,9 +107,9 @@
     "@date-fns/tz": "^1.1.2",
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@material-symbols/svg-400": "^0.27.2",
-    "@patternfly/patternfly": "^5.1.0",
-    "@patternfly/react-core": "^5.1.1",
-    "@patternfly/react-table": "^5.1.1",
+    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
     "@tanstack/react-query": "^5.49.2",
     "axios": "^1.7.3",
     "fast-sort": "^3.4.0",

web/src/components/core/Drawer.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -73,7 +73,7 @@ const Drawer = forwardRef(
               <DrawerPanelBody>{panelContent}</DrawerPanelBody>
             </DrawerPanelContent>
           }
-          colorVariant="no-background"
+          colorVariant="primary"
         >
           <DrawerContentBody>{children}</DrawerContentBody>
         </DrawerContent>

web/src/components/core/Em.test.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2023] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -26,7 +26,7 @@ import { plainRender } from "~/test-utils";
 import { Em } from "~/components/core";
 
 describe("Em", () => {
-  it("wraps given children inside a compact PF/Label", () => {
+  it.skip("wraps given children inside a compact PF/Label", () => {
     plainRender(<Em>Whatever</Em>);
     const children = screen.getByText("Whatever");
     const parent = children.closest("span.pf-v5-c-label");

web/src/components/core/EmptyState.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -23,13 +23,11 @@
 import React from "react";
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateBody,
   Stack,
   EmptyStateFooter,
   EmptyStateActions,
   EmptyStateProps,
-  EmptyStateHeaderProps,
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { IconProps } from "../layout/Icon";
@@ -38,7 +36,7 @@ type EmptyStateWrapperProps = {
   title: string;
   icon: IconProps["name"];
   color?: string;
-  headingLevel?: EmptyStateHeaderProps["headingLevel"];
+  headingLevel?: EmptyStateProps["headingLevel"];
   noPadding?: boolean;
   actions?: React.ReactNode;
   children?: React.ReactNode;
@@ -62,19 +60,22 @@ export default function EmptyStateWrapper({
   actions,
   children,
   ...rest
-}: Partial<EmptyStateProps> & EmptyStateWrapperProps) {
+}: Partial<Omit<EmptyStateProps, "icon">> & EmptyStateWrapperProps) {
   // @ts-ignore
   if (noPadding) rest.className = [rest.className, "no-padding"].join(" ").trim();
 
+  const EmptyStateIcon = () => <Icon name={icon} size="xxl" color={color} />;
+
   return (
-    <EmptyState variant="lg" {...rest}>
-      <EmptyStateHeader
-        headingLevel={headingLevel}
-        titleText={title}
-        // FIXME: Allow more colors, not only PF text utils. See core/Icon.jsx too.
-        titleClassName={`pf-v5-u-${color}`}
-        icon={<Icon name={icon} size="xxl" color={color} />}
-      />
+    <EmptyState
+      variant="lg"
+      headingLevel={headingLevel}
+      titleText={title}
+      // FIXME: Allow more colors, not only PF text utils. See core/Icon.jsx too.
+      titleClassName={`pf-v5-u-${color}`}
+      icon={EmptyStateIcon}
+      {...rest}
+    >
       {children && (
         <EmptyStateBody>
           <Stack hasGutter>{children}</Stack>

web/src/components/core/FormReadOnlyField.test.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -29,6 +29,6 @@ it("renders label and content wrapped in div nodes using expected PatternFly sty
   plainRender(<FormReadOnlyField label="Product">Agama</FormReadOnlyField>);
   const field = screen.getByText("Agama");
   const label = screen.getByText("Product");
-  expect(field.classList.contains("pf-v5-c-form__group")).toBe(true);
-  expect(label.classList.contains("pf-v5-c-form__label-text")).toBe(true);
+  expect(field.classList.contains("pf-v6-c-form__group")).toBe(true);
+  expect(label.classList.contains("pf-v6-c-form__label-text")).toBe(true);
 });

web/src/components/core/InstallButton.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2024] SUSE LLC
+ * Copyright (c) [2022-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -100,9 +100,8 @@ const InstallButton = (
   return (
     <>
       <Button
-        variant="primary"
+        variant="control"
         size="lg"
-        className="agama-install-button"
         {...buttonProps}
         onClick={hasIssues ? onClickWithIssues : open}
       >

web/src/components/core/InstallationFinished.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2024] SUSE LLC
+ * Copyright (c) [2022-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -23,21 +23,20 @@
 import React, { useState } from "react";
 import {
   Alert,
+  Bullseye,
   Button,
   Card,
   CardBody,
+  Content,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   ExpandableSection,
   Flex,
   Grid,
   GridItem,
   Stack,
-  Text,
 } from "@patternfly/react-core";
-import { Center, Icon } from "~/components/layout";
+import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
 import { useInstallerStatus } from "~/queries/status";
@@ -52,7 +51,7 @@ const TpmHint = () => {
   const title = _("TPM sealing requires the new system to be booted directly.");
 
   return (
-    <Alert isInline className={alignmentStyles.textAlignLeft} title={<strong>{title}</strong>}>
+    <Alert isInline className={alignmentStyles.textAlignStart} title={<strong>{title}</strong>}>
       <Stack hasGutter>
         {_("If a local media was used to run this installer, remove it before the next boot.")}
         <ExpandableSection
@@ -108,31 +107,32 @@ function InstallationFinished() {
   }
 
   return (
-    <Center>
+    <Bullseye>
       <Grid hasGutter>
         <GridItem sm={8} smOffset={2}>
-          <Card isRounded>
+          <Card>
             <CardBody>
               <Stack hasGutter>
-                <EmptyState variant="xl">
-                  <EmptyStateHeader
-                    titleText={_("Congratulations!")}
-                    headingLevel="h2"
-                    icon={<EmptyStateIcon icon={SuccessIcon} />}
-                  />
+                <EmptyState
+                  variant="xl"
+                  titleText={_("Congratulations!")}
+                  headingLevel="h2"
+                  icon={SuccessIcon}
+                >
                   <EmptyStateBody>
                     <Flex
+                      direction={{ default: "column" }}
                       rowGap={{ default: "rowGapMd" }}
                       justifyContent={{ default: "justifyContentCenter" }}
                     >
-                      <Text>{_("The installation on your machine is complete.")}</Text>
-                      <Text>
+                      <Content>{_("The installation on your machine is complete.")}</Content>
+                      <Content>
                         {useIguana
                           ? _("At this point you can power off the machine.")
                           : _(
                               "At this point you can reboot the machine to log in to the new system.",
                             )}
-                      </Text>
+                      </Content>
                       {usingTpm(config) && <TpmHint />}
                     </Flex>
                   </EmptyStateBody>
@@ -147,7 +147,7 @@ function InstallationFinished() {
           </Card>
         </GridItem>
       </Grid>
-    </Center>
+    </Bullseye>
   );
 }
 

web/src/components/core/IssuesDrawer.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -87,9 +87,7 @@ const IssuesDrawer = forwardRef(({ onClose }: { onClose: () => void }, ref) => {
                         <li key={subIdx}>
                           <HelperText>
                             {/** @ts-expect-error TS complain about variant, let's fix it after PF6 migration */}
-                            <HelperTextItem variant={variant} hasIcon>
-                              {issue.description}
-                            </HelperTextItem>
+                            <HelperTextItem variant={variant}>{issue.description}</HelperTextItem>
                           </HelperText>
                         </li>
                       );