remove deprecated component use (keycloak#28924)

towards: keycloak#28197 Signed-off-by: Erik Jan de Wit <[email protected]>
ch-lepp · Apr 22, 2024 · 9a418cc · 9a418cc
1 parent 071032a
commit 9a418cc
Showing 1 changed file with 25 additions and 16 deletions.
diff --git a/js/apps/account-ui/src/account-security/SigningIn.tsx b/js/apps/account-ui/src/account-security/SigningIn.tsx
@@ -6,17 +6,16 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
   PageSection,
   Spinner,
   Split,
   SplitItem,
   Title,
 } from "@patternfly/react-core";
-import {
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-} from "@patternfly/react-core/deprecated";
+import { EllipsisVIcon } from "@patternfly/react-icons";
 import { CSSProperties, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { getCredentials } from "../api/methods";
@@ -27,9 +26,9 @@ import {
 import { EmptyRow } from "../components/datalist/EmptyRow";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
+import { useEnvironment } from "../root/KeycloakContext";
 import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
-import { useEnvironment } from "../root/KeycloakContext";
 
 type MobileLinkProps = {
   title: string;
@@ -42,17 +41,27 @@ const MobileLink = ({ title, onClick, testid }: MobileLinkProps) => {
   return (
     <>
       <Dropdown
-        isPlain
-        position="right"
-        toggle={<KebabToggle onToggle={(_event, val) => setOpen(val)} />}
-        className="pf-v5-u-display-none-on-lg"
+        popperProps={{
+          position: "right",
+        }}
+        onOpenChange={(isOpen) => setOpen(isOpen)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            className="pf-v5-u-display-none-on-lg"
+            ref={toggleRef}
+            variant="plain"
+            onClick={() => setOpen(!open)}
+            isExpanded={open}
+          >
+            <EllipsisVIcon />
+          </MenuToggle>
+        )}
         isOpen={open}
-        dropdownItems={[
-          <DropdownItem key="1" onClick={onClick}>
-            {title}
-          </DropdownItem>,
-        ]}
-      />
+      >
+        <DropdownItem key="1" onClick={onClick}>
+          {title}
+        </DropdownItem>
+      </Dropdown>
       <Button
         variant="link"
         onClick={onClick}