Upgrade admin and account console to PatternFly 5

js/CODING_GUIDELINES.md

@@ -141,28 +141,28 @@ For the Admin UI, we modify the PatternFly convention to namespace the classes a
 **Example of a CSS custom property**
 ```css
 // Modify the height of the brand image
---keycloak-admin--brand--Height: var(--pf-global--spacer--xl); 
+--keycloak-admin--brand--Height: var(--pf-v5-global--spacer--xl); 
 ```
 
 **Example**
 ```css
 // Don’t increase specificity
 // Don’t use pixel values
-.keycloak-admin--manage-columns__modal .pf-c-dropdown {
+.keycloak-admin--manage-columns__modal .pf-v5-c-dropdown {
    margin-bottom: 24px
 }
 
 // Do use a new class
 // Do use a PatternFly global spacer variable
 .keycloak-admin--manage-columns__dropdown {
-   margin-bottom: var(--pf-global--spacer--xl);
+   margin-bottom: var(--pf-v5-global--spacer--xl);
 }
 ```
 ### Using utility classes
 
 Utility classes can be used to add specific styling to a component, such as margin-bottom or padding. However, their use should be limited to one-off styling needs.  
 
-For example, instead of using the utility class for margin-right multiple times, we should define a new Admin UI class that adds this *margin-right: var(--pf-global--spacer--sm);* and in this example, the new class can set the color appropriately as well.
+For example, instead of using the utility class for margin-right multiple times, we should define a new Admin UI class that adds this *margin-right: var(--pf-v5-global--spacer--sm);* and in this example, the new class can set the color appropriately as well.
 
 **Using a utility class **
 ```css
@@ -171,8 +171,8 @@ switch (titleStatus) {
      return (
        <>
          <InfoCircleIcon
-           className="pf-u-mr-sm" // utility class 
-           color="var(--pf-global--info-color--100)"
+           className="pf-v5-u-mr-sm" // utility class 
+           color="var(--pf-v5-global--info-color--100)"
          />{" "}
          {titleText}{" "}
        </>
@@ -181,8 +181,8 @@ switch (titleStatus) {
      return (
        <>
          <InfoCircleIcon
-           className="pf-u-mr-sm"
-           color="var(--pf-global--danger-color--100)"
+           className="pf-v5-u-mr-sm"
+           color="var(--pf-v5-global--danger-color--100)"
          />{" "}
          {titleText}{" "}
        </>

js/apps/account-ui/package.json

@@ -17,10 +17,10 @@
     "test": "wireit"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^4.224.5",
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-icons": "^4.93.7",
-    "@patternfly/react-table": "^4.113.6",
+    "@patternfly/patternfly": "^5.2.1",
+    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-icons": "^5.2.1",
+    "@patternfly/react-table": "^5.2.4",
     "i18next": "^23.10.1",
     "i18next-http-backend": "^2.5.0",
     "keycloak-js": "workspace:*",

js/apps/account-ui/src/account-security/AccountRow.tsx

@@ -5,13 +5,15 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  Icon,
   Label,
   Split,
   SplitItem,
 } from "@patternfly/react-core";
 import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
 import { IconMapper, useAlerts } from "ui-shared";
+
 import { linkAccount, unLinkAccount } from "../api/methods";
 import { LinkedAccountRepresentation } from "../api/representations";
 import { useEnvironment } from "../root/KeycloakContext";
@@ -64,10 +66,10 @@ export const AccountRow = ({
           dataListCells={[
             <DataListCell key="idp">
               <Split>
-                <SplitItem className="pf-u-mr-sm">
+                <SplitItem className="pf-v5-u-mr-sm">
                   <IconMapper icon={account.providerName} />
                 </SplitItem>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-name`}>
                     {account.displayName}
                   </span>
@@ -76,7 +78,7 @@ export const AccountRow = ({
             </DataListCell>,
             <DataListCell key="label">
               <Split>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-label`}>
                     <Label color={account.social ? "blue" : "green"}>
                       {t(account.social ? "socialLogin" : "systemDefined")}
@@ -87,7 +89,7 @@ export const AccountRow = ({
             </DataListCell>,
             <DataListCell key="username" width={5}>
               <Split>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-username`}>
                     {account.linkedUsername}
                   </span>
@@ -107,7 +109,10 @@ export const AccountRow = ({
               variant="link"
               onClick={() => unLink(account)}
             >
-              <UnlinkIcon size="sm" /> {t("unLink")}
+              <Icon size="sm">
+                <UnlinkIcon />
+              </Icon>{" "}
+              {t("unLink")}
             </Button>
           )}
           {!isLinked && (
@@ -116,7 +121,10 @@ export const AccountRow = ({
               variant="link"
               onClick={() => link(account)}
             >
-              <LinkIcon size="sm" /> {t("link")}
+              <Icon size="sm">
+                <LinkIcon />
+              </Icon>{" "}
+              {t("link")}
             </Button>
           )}
         </DataListAction>

js/apps/account-ui/src/account-security/DeviceActivity.tsx

@@ -110,7 +110,7 @@ export const DeviceActivity = () => {
       title={t("deviceActivity")}
       description={t("signedInDevicesExplanation")}
     >
-      <Split hasGutter className="pf-u-mb-lg">
+      <Split hasGutter className="pf-v5-u-mb-lg">
         <SplitItem isFilled>
           <Title headingLevel="h2" size="xl">
             {t("signedInDevices")}
@@ -149,14 +149,14 @@ export const DeviceActivity = () => {
               <DataListItemRow key={device.id} data-testid={`row-${index}`}>
                 <DataListContent
                   aria-label="device-sessions-content"
-                  className="pf-u-flex-grow-1"
+                  className="pf-v5-u-flex-grow-1"
                 >
                   <Grid hasGutter>
                     <GridItem span={1} rowSpan={2}>
                       {device.mobile ? <MobileAltIcon /> : <DesktopIcon />}
                     </GridItem>
                     <GridItem sm={8} md={9} span={10}>
-                      <span className="pf-u-mr-md session-title">
+                      <span className="pf-v5-u-mr-md session-title">
                         {device.os.toLowerCase().includes("unknown")
                           ? t("unknownOperatingSystem")
                           : device.os}{" "}
@@ -169,7 +169,7 @@ export const DeviceActivity = () => {
                       )}
                     </GridItem>
                     <GridItem
-                      className="pf-u-text-align-right"
+                      className="pf-v5-u-text-align-right"
                       sm={3}
                       md={2}
                       span={1}

js/apps/account-ui/src/account-security/LinkedAccounts.tsx

@@ -38,7 +38,7 @@ export const LinkedAccounts = () => {
     >
       <Stack hasGutter>
         <StackItem>
-          <Title headingLevel="h2" className="pf-u-mb-lg" size="xl">
+          <Title headingLevel="h2" className="pf-v5-u-mb-lg" size="xl">
             {t("linkedLoginProviders")}
           </Title>
           <DataList id="linked-idps" aria-label={t("linkedLoginProviders")}>
@@ -57,7 +57,11 @@ export const LinkedAccounts = () => {
           </DataList>
         </StackItem>
         <StackItem>
-          <Title headingLevel="h2" className="pf-u-mt-xl pf-u-mb-lg" size="xl">
+          <Title
+            headingLevel="h2"
+            className="pf-v5-u-mt-xl pf-v5-u-mb-lg"
+            size="xl"
+          >
             {t("unlinkedLoginProviders")}
           </Title>
           <DataList id="unlinked-idps" aria-label={t("unlinkedLoginProviders")}>

js/apps/account-ui/src/account-security/SigningIn.tsx

@@ -6,15 +6,17 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   PageSection,
   Spinner,
   Split,
   SplitItem,
   Title,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import { CSSProperties, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { ContinueCancelModal, useAlerts } from "ui-shared";
@@ -44,8 +46,8 @@ const MobileLink = ({ title, onClick, testid }: MobileLinkProps) => {
       <Dropdown
         isPlain
         position="right"
-        toggle={<KebabToggle onToggle={setOpen} />}
-        className="pf-u-display-none-on-lg"
+        toggle={<KebabToggle onToggle={(_event, val) => setOpen(val)} />}
+        className="pf-v5-u-display-none-on-lg"
         isOpen={open}
         dropdownItems={[
           <DropdownItem key="1" onClick={onClick}>
@@ -56,7 +58,7 @@ const MobileLink = ({ title, onClick, testid }: MobileLinkProps) => {
       <Button
         variant="link"
         onClick={onClick}
-        className="pf-u-display-none pf-u-display-inline-flex-on-lg"
+        className="pf-v5-u-display-none pf-v5-u-display-inline-flex-on-lg"
         data-testid={testid}
       >
         {title}
@@ -83,12 +85,14 @@ export const SigningIn = () => {
     credMetadata: CredentialMetadataRepresentation,
   ) => {
     const credential = credMetadata.credential;
-    const maxWidth = { "--pf-u-max-width--MaxWidth": "300px" } as CSSProperties;
+    const maxWidth = {
+      "--pf-v5-u-max-width--MaxWidth": "300px",
+    } as CSSProperties;
     const items = [
       <DataListCell
         key="title"
         data-testrole="label"
-        className="pf-u-max-width"
+        className="pf-v5-u-max-width"
         style={maxWidth}
       >
         {credential.userLabel || t(credential.type as TFuncKey)}
@@ -102,7 +106,7 @@ export const SigningIn = () => {
           data-testrole="created-at"
         >
           <Trans i18nKey="credentialCreatedAt">
-            <strong className="pf-u-mr-md"></strong>
+            <strong className="pf-v5-u-mr-md"></strong>
             {{ date: formatDate(new Date(credential.createdDate)) }}
           </Trans>
         </DataListCell>,
@@ -125,24 +129,24 @@ export const SigningIn = () => {
   return (
     <Page title={t("signingIn")} description={t("signingInDescription")}>
       {credentialUniqueCategories.map((category) => (
-        <PageSection key={category} variant="light" className="pf-u-px-0">
+        <PageSection key={category} variant="light" className="pf-v5-u-px-0">
           <Title headingLevel="h2" size="xl" id={`${category}-categ-title`}>
             {t(category as TFuncKey)}
           </Title>
           {credentials
             .filter((cred) => cred.category == category)
             .map((container) => (
               <>
-                <Split className="pf-u-mt-lg pf-u-mb-lg">
+                <Split className="pf-v5-u-mt-lg pf-v5-u-mb-lg">
                   <SplitItem>
                     <Title
                       headingLevel="h3"
                       size="md"
-                      className="pf-u-mb-md"
+                      className="pf-v5-u-mb-md"
                       data-testid={`${container.type}/help`}
                     >
                       <span
-                        className="cred-title pf-u-display-block"
+                        className="cred-title pf-v5-u-display-block"
                         data-testid={`${container.type}/title`}
                       >
                         {t(container.displayName as TFuncKey)}
@@ -154,7 +158,7 @@ export const SigningIn = () => {
                   </SplitItem>
                   {container.createAction && (
                     <SplitItem isFilled>
-                      <div className="pf-u-float-right">
+                      <div className="pf-v5-u-float-right">
                         <MobileLink
                           onClick={() =>
                             login({
@@ -175,7 +179,7 @@ export const SigningIn = () => {
 
                 <DataList
                   aria-label="credential list"
-                  className="pf-u-mb-xl"
+                  className="pf-v5-u-mb-xl"
                   data-testid={`${container.type}/credential-list`}
                 >
                   {container.userCredentialMetadatas.length === 0 && (
@@ -191,7 +195,7 @@ export const SigningIn = () => {
                     <DataListItem key={meta.credential.id}>
                       <DataListItemRow id={`cred-${meta.credential.id}`}>
                         <DataListItemCells
-                          className="pf-u-py-0"
+                          className="pf-v5-u-py-0"
                           dataListCells={[
                             ...credentialRowCells(meta),
                             <DataListAction

js/apps/account-ui/src/applications/Applications.tsx

@@ -91,21 +91,21 @@ export const Applications = () => {
                 <DataListCell
                   key="applications-list-client-id-header"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("name")}</strong>
                 </DataListCell>,
                 <DataListCell
                   key="applications-list-app-type-header"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("applicationType")}</strong>
                 </DataListCell>,
                 <DataListCell
                   key="applications-list-status"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("status")}</strong>
                 </DataListCell>,
@@ -120,20 +120,20 @@ export const Applications = () => {
             data-testid="applications-list-item"
             isExpanded={application.open}
           >
-            <DataListItemRow className="pf-u-align-items-center">
+            <DataListItemRow className="pf-v5-u-align-items-center">
               <DataListToggle
                 onClick={() => toggleOpen(application.clientId)}
                 isExpanded={application.open}
                 id={`toggle-${application.clientId}`}
                 aria-controls={`content-${application.clientId}`}
               />
               <DataListItemCells
-                className="pf-u-align-items-center"
+                className="pf-v5-u-align-items-center"
                 dataListCells={[
                   <DataListCell width={2} key={`client${application.clientId}`}>
                     {application.effectiveUrl && (
                       <Button
-                        className="pf-u-pl-0 title-case"
+                        className="pf-v5-u-pl-0 title-case"
                         component="a"
                         variant="link"
                         onClick={() => window.open(application.effectiveUrl)}
@@ -166,7 +166,7 @@ export const Applications = () => {
 
             <DataListContent
               id={`content-${application.clientId}`}
-              className="pf-u-pl-4xl"
+              className="pf-v5-u-pl-4xl"
               aria-label={t("applicationDetails", {
                 clientId: application.clientId,
               })}

js/apps/account-ui/src/components/datalist/EmptyRow.tsx

@@ -11,7 +11,7 @@ type EmptyRowProps = {
 
 export const EmptyRow = ({ message, ...props }: EmptyRowProps) => {
   return (
-    <DataListItem className="pf-u-align-items-center pf-p-b-0">
+    <DataListItem className="pf-v5-u-align-items-center pf-p-b-0">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[

js/apps/account-ui/src/groups/Groups.tsx

@@ -68,7 +68,7 @@ export const Groups = () => {
                     id="directMembership-checkbox"
                     data-testid="directMembership-checkbox"
                     isChecked={directMembership}
-                    onChange={(checked) => setDirectMembership(checked)}
+                    onChange={(_event, checked) => setDirectMembership(checked)}
                   />
                 </DataListCell>,
               ]}