some more deprecation removal

working towards fixing: keycloak#28197 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
edewit · Apr 22, 2024 · 41dfe77 · 41dfe77
1 parent 014b644
commit 41dfe77
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
@@ -6,7 +6,6 @@ import {
   Form,
   Modal,
 } from "@patternfly/react-core";
-import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "@keycloak/keycloak-ui-shared";
@@ -82,7 +81,6 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
                 value: t(`flow.${REALM_FLOWS.get(key)}`),
               }))}
             controller={{ defaultValue: flowKeys[0] }}
-            variant={SelectVariant.single}
             menuAppendTo="parent"
             aria-label={t("chooseBindingType")}
           />

diff --git a/js/apps/admin-ui/src/authentication/FlowDetails.tsx b/js/apps/admin-ui/src/authentication/FlowDetails.tsx
@@ -7,6 +7,7 @@ import {
   ButtonVariant,
   DataList,
   DragDrop,
+  DropdownItem,
   Droppable,
   Label,
   PageSection,
@@ -16,7 +17,6 @@ import {
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { DomainIcon, TableIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";

diff --git a/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx b/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx
@@ -1,10 +1,6 @@
 import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
-import { Tooltip } from "@patternfly/react-core";
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
+import { DropdownList, Tooltip } from "@patternfly/react-core";
+import { Dropdown, DropdownItem, MenuToggle } from "@patternfly/react-core";
 import { PlusIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -48,39 +44,43 @@ export const AddFlowDropdown = ({
     <Tooltip content={t("add")}>
       <>
         <Dropdown
-          isPlain
-          position="right"
+          popperProps={{
+            position: "right",
+          }}
           data-testid={`${execution.displayName}-edit-dropdown`}
           isOpen={open}
-          toggle={
-            <DropdownToggle
-              onToggle={(_event, val) => setOpen(val)}
+          toggle={(ref) => (
+            <MenuToggle
+              ref={ref}
+              variant="plain"
+              onClick={() => setOpen(!open)}
               aria-label={t("add")}
             >
               <PlusIcon />
-            </DropdownToggle>
-          }
-          dropdownItems={[
+            </MenuToggle>
+          )}
+          onSelect={() => setOpen(false)}
+        >
+          <DropdownList>
             <DropdownItem
               key="addStep"
               onClick={() =>
                 setType(providerId === "form-flow" ? "form" : "basic")
               }
             >
               {t("addStep")}
-            </DropdownItem>,
+            </DropdownItem>
             <DropdownItem
               key="addCondition"
               onClick={() => setType("condition")}
             >
               {t("addCondition")}
-            </DropdownItem>,
+            </DropdownItem>
             <DropdownItem key="addSubFlow" onClick={() => setType("subFlow")}>
               {t("addSubFlow")}
-            </DropdownItem>,
-          ]}
-          onSelect={() => setOpen(false)}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
         {type && type !== "subFlow" && (
           <AddStepModal
             name={execution.displayName!}

diff --git a/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx b/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx
@@ -1,10 +1,11 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
+  MenuToggle,
   Select,
+  SelectList,
   SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core/deprecated";
+} from "@patternfly/react-core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import type { ExpandableExecution } from "../execution-model";
 
@@ -31,17 +32,25 @@ export const FlowRequirementDropdown = ({
       {flow.requirementChoices && flow.requirementChoices.length > 1 && (
         <Select
           className="keycloak__authentication__requirement-dropdown"
-          variant={SelectVariant.single}
-          onToggle={(_event, val) => setOpen(val)}
+          onOpenChange={(isOpen) => setOpen(isOpen)}
           onSelect={(_event, value) => {
-            flow.requirement = value.toString();
+            flow.requirement = value?.toString();
             onChange(flow);
             setOpen(false);
           }}
-          selections={[flow.requirement]}
+          selected={flow.requirement}
           isOpen={open}
+          toggle={(ref) => (
+            <MenuToggle
+              ref={ref}
+              onClick={() => setOpen(!open)}
+              isExpanded={open}
+            >
+              {t(`requirements.${flow.requirement}`)}
+            </MenuToggle>
+          )}
         >
-          {options}
+          <SelectList>{options}</SelectList>
         </Select>
       )}
       {(!flow.requirementChoices || flow.requirementChoices.length <= 1) && (