Upgrade deprecated components

As stated in the official docs[1], some
components have been updated in the major
release. To prevent these components to
be outdated any time soon, those need
to be adapted to the newer version.

[1]- https://www.patternfly.org/get-started/upgrade/#upgrade-deprecated-components
Signed-off-by: Carla Martinez <carlmart@redhat.com>

src/AppLayout.tsx

@@ -11,12 +11,11 @@ import {
   SkipToContent,
   Toolbar,
   PageSidebarBody,
-} from "@patternfly/react-core";
-import {
-  Dropdown,
   DropdownItem,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
+  Dropdown,
+  MenuToggleElement,
+  MenuToggle,
+} from "@patternfly/react-core";
 import React from "react";
 // Icons
 import BarsIcon from "@patternfly/react-icons/dist/esm/icons/bars-icon";
@@ -37,8 +36,8 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
   // Dropdown
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 
-  const onDropdownToggle = (isOpen: boolean) => {
-    setIsDropdownOpen(isOpen);
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
   const onDropdownSelect = () => {
@@ -66,20 +65,23 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
   // TODO: Show the proper user login
   const dropdown = (
     <Dropdown
-      isText
-      isPlain
       onSelect={onDropdownSelect}
-      toggle={
-        <DropdownToggle
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
           id="toggle-plain-text"
-          onToggle={(_event, isOpen: boolean) => onDropdownToggle(isOpen)}
+          onClick={onDropdownToggle}
+          isExpanded={isDropdownOpen}
+          className="pf-v5-u-mr-md"
+          variant="plainText"
         >
           Administrator
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={isDropdownOpen}
-      dropdownItems={dropdownItems}
-    />
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 
   const Header = (

src/components/CertificateMappingDataOption.tsx

@@ -153,7 +153,6 @@ const CertificateMappingDataOption = (
   const certificateElement = (
     <>
       <Flex direction={{ default: "column" }} name="certificate">
-        {/* {props.certificatesList.map((certificate, idx) => ( */}
         {certificateListCopy.map((certificate, idx) => (
           <Flex
             direction={{ default: "row" }}

src/components/Form/IpaCertificates.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 // PatternFly
-import { Button, CardBody, CardTitle } from "@patternfly/react-core";
 import {
+  Button,
+  CardBody,
+  CardTitle,
+  Divider,
   DropdownItem,
-  DropdownSeparator,
-} from "@patternfly/react-core/deprecated";
+} from "@patternfly/react-core";
 // Data types
 import { Certificate, Metadata } from "src/utils/datatypes/globalDataTypes";
 // ipaObject utils
@@ -226,7 +228,7 @@ const IpaCertificates = (props: PropsToIpaCertificates) => {
       >
         Remove hold
       </DropdownItem>,
-      <DropdownSeparator key="separator" />,
+      <Divider component="li" key="separator" />,
       <DropdownItem
         key="delete"
         component="button"

src/components/Form/IpaSelect.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 // PatternFly
 import {
+  MenuToggle,
+  MenuToggleElement,
   Select,
   SelectOption,
-  SelectOptionObject,
-  SelectVariant,
-} from "@patternfly/react-core/deprecated";
+} from "@patternfly/react-core";
 // Utils
 import {
   IPAParamDefinition,
@@ -17,14 +17,20 @@ import { NO_SELECTION_OPTION } from "src/utils/constUtils";
 interface IPAParamDefinitionSelect extends IPAParamDefinition {
   id?: string;
   setIpaObject?: (ipaObject: Record<string, unknown>) => void;
-  variant?: "single" | "checkbox" | "typeahead" | "typeaheadmulti";
+  variant?:
+    | "default"
+    | "plain"
+    | "primary"
+    | "plainText"
+    | "secondary"
+    | "typeahead";
   options: string[];
   ariaLabelledBy?: string;
 }
 
 const IpaSelect = (props: IPAParamDefinitionSelect) => {
   // Obtains the metadata of the parameter
-  const { required, readOnly, value } = getParamProperties(props);
+  const { readOnly, value } = getParamProperties(props);
 
   // Handle selected value
   let valueSelected = NO_SELECTION_OPTION;
@@ -36,9 +42,13 @@ const IpaSelect = (props: IPAParamDefinitionSelect) => {
 
   const [isOpen, setIsOpen] = React.useState(false);
 
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
   const onSelect = (
-    _event: React.MouseEvent | React.ChangeEvent,
-    selection: string | SelectOptionObject
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    selection: string | number | undefined
   ) => {
     let valueToUpdate = "";
 
@@ -53,27 +63,58 @@ const IpaSelect = (props: IPAParamDefinitionSelect) => {
     setIsOpen(false);
   };
 
+  // Toggle
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggle}
+      isDisabled={readOnly}
+      isExpanded={isOpen}
+      variant={props.variant || "default"}
+      className="pf-v5-u-w-100"
+    >
+      {valueSelected}
+    </MenuToggle>
+  );
+
   // Provide empty option at the beginning of the list
-  const optionsToSelect: string[] = [...(props.options || [])];
-  optionsToSelect.unshift(NO_SELECTION_OPTION);
+  const [optionsToSelect, setOptionsToSelect] = React.useState<string[]>(
+    props.options || []
+  );
+
+  React.useEffect(() => {
+    // Add empty option at the beginning of the list
+    if (optionsToSelect[0] !== NO_SELECTION_OPTION) {
+      optionsToSelect.unshift(NO_SELECTION_OPTION);
+    }
+  }, [optionsToSelect]);
+
+  React.useEffect(() => {
+    // Add empty option at the beginning of the list
+    if (props.options !== optionsToSelect) {
+      const optionsTemp = [...props.options];
+      setOptionsToSelect(optionsTemp || []);
+      optionsTemp.unshift(NO_SELECTION_OPTION);
+    }
+  }, [props.options]);
 
   return (
     <Select
       id={props.id}
-      name={props.name}
-      variant={props.variant || SelectVariant.single}
       aria-label={props.name}
-      onToggle={(_event, val) => setIsOpen(val)}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
       onSelect={onSelect}
-      selections={valueSelected}
+      selected={valueSelected}
       isOpen={isOpen}
       aria-labelledby={props.ariaLabelledBy || props.id}
-      readOnly={readOnly}
-      isDisabled={readOnly}
-      required={required}
     >
       {optionsToSelect.map((option, index) => {
-        return <SelectOption key={index} value={option} />;
+        return (
+          <SelectOption key={index} value={option}>
+            {option}
+          </SelectOption>
+        );
       })}
     </Select>
   );

src/components/UserSettings.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useState } from "react";
+import React, { useState } from "react";
 // PatternFly
 import {
   PageSection,
@@ -10,11 +10,8 @@ import {
   Sidebar,
   SidebarPanel,
   SidebarContent,
-} from "@patternfly/react-core";
-import {
   DropdownItem,
-  DropdownDirection,
-} from "@patternfly/react-core/deprecated";
+} from "@patternfly/react-core";
 // Icons
 import OutlinedQuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon";
 // Data types
@@ -177,7 +174,7 @@ const UserSettings = (props: PropsToUserSettings) => {
 
   const onKebabSelect = (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _event: SyntheticEvent<HTMLDivElement, Event> | undefined
+    _event: React.MouseEvent<Element, MouseEvent> | undefined
   ) => {
     setIsKebabOpen(!isKebabOpen);
   };
@@ -244,12 +241,11 @@ const UserSettings = (props: PropsToUserSettings) => {
       key: 3,
       element: (
         <KebabLayout
-          direction={DropdownDirection.up}
+          direction={"up"}
           onDropdownSelect={onKebabSelect}
           onKebabToggle={onKebabToggle}
           idKebab="toggle-action-buttons"
           isKebabOpen={isKebabOpen}
-          isPlain={true}
           dropdownItems={
             props.from === "active-users"
               ? activeDropdownItems

src/components/layouts/ExpandableCardLayout.tsx

@@ -4,8 +4,15 @@ import {
   Card,
   CardHeader,
   CardExpandableContent,
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Flex,
+  FlexItem,
 } from "@patternfly/react-core";
-import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
+// Icons
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
 interface PropsToCardLayout {
   className?: string;
@@ -33,18 +40,26 @@ const ExpandableCardLayout = (props: PropsToCardLayout) => {
     setIsOpen(!isOpen);
   };
 
+  // Toggle
+  const KebabToggleWithRef = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      id={props.id}
+      aria-label="kebab dropdown toggle"
+      variant="plain"
+      isExpanded={isOpen}
+      onClick={onSelect}
+    >
+      <EllipsisVIcon />
+    </MenuToggle>
+  );
+
   const getDropdownItems = () => {
     if (props.dropdownItems !== undefined && props.dropdownItems.length > 0) {
       return (
-        <Dropdown
-          onSelect={onSelect}
-          toggle={<KebabToggle onToggle={(_event, val) => setIsOpen(val)} />}
-          isOpen={isOpen}
-          isPlain
-          dropdownItems={props.dropdownItems}
-          position={"right"}
-          className="pf-v5-u-ml-auto"
-        />
+        <Dropdown toggle={KebabToggleWithRef} isOpen={isOpen}>
+          <DropdownList>{props.dropdownItems}</DropdownList>
+        </Dropdown>
       );
     }
   };
@@ -59,9 +74,17 @@ const ExpandableCardLayout = (props: PropsToCardLayout) => {
         onExpand={onExpand}
         toggleButtonProps={props.headerToggleButtonProps}
       >
-        {props.cardActions !== undefined && <>{props.cardActions}</>}
-        {props.cardTitle !== undefined && <>{props.cardTitle}</>}
-        {props.dropdownItems !== undefined && getDropdownItems()}
+        <Flex>
+          <FlexItem>
+            {props.cardActions !== undefined && <>{props.cardActions}</>}
+          </FlexItem>
+          <FlexItem>
+            {props.cardTitle !== undefined && <>{props.cardTitle}</>}
+          </FlexItem>
+          <FlexItem align={{ default: "alignRight" }}>
+            {props.dropdownItems !== undefined && getDropdownItems()}
+          </FlexItem>
+        </Flex>
       </CardHeader>
       <CardExpandableContent>{props.cardBody}</CardExpandableContent>
     </Card>

src/components/layouts/KebabLayout.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 // PatternFly
-import { Dropdown } from "@patternfly/react-core/deprecated";
-import { MenuToggle } from "@patternfly/react-core";
+import {
+  Dropdown,
+  MenuToggle,
+  MenuToggleElement,
+} from "@patternfly/react-core";
 // Icons
 import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
 interface PropsToKebab {
   // Dropdown
   onDropdownSelect?:
-    | ((
-        event?: React.SyntheticEvent<HTMLDivElement, Event> | undefined
-      ) => void)
+    | ((event?: React.MouseEvent<Element, MouseEvent> | undefined) => void)
     | undefined;
   isKebabOpen?: boolean;
   className?: string;
@@ -25,8 +26,9 @@ interface PropsToKebab {
 
 const KebabLayout = (props: PropsToKebab) => {
   // Toggle
-  const KebabToggleWithRef = (
+  const toggleKebab = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      ref={toggleRef}
       id={props.idKebab}
       aria-label="kebab dropdown toggle"
       variant="plain"
@@ -41,12 +43,13 @@ const KebabLayout = (props: PropsToKebab) => {
     <Dropdown
       onSelect={props.onDropdownSelect}
       className={props.className}
-      toggle={KebabToggleWithRef}
+      toggle={toggleKebab}
       isOpen={props.isKebabOpen}
-      isPlain={props.isPlain}
-      dropdownItems={props.dropdownItems}
-      direction={props.direction}
-    />
+      isPlain={props.isPlain || false}
+      popperProps={{ direction: props.direction }}
+    >
+      {props.dropdownItems}
+    </Dropdown>
   );
 };