removed use of deprecated dropdown (keycloak#28928)

towards: keycloak#28197 Signed-off-by: Erik Jan de Wit <[email protected]>
ch-lepp · Apr 22, 2024 · 014b644 · 014b644
1 parent 9a418cc
commit 014b644
Showing 1 changed file with 65 additions and 36 deletions.
diff --git a/js/apps/account-ui/src/resources/ResourcesTab.tsx b/js/apps/account-ui/src/resources/ResourcesTab.tsx
@@ -2,6 +2,10 @@ import {
   Button,
   Chip,
   ChipGroup,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -10,13 +14,9 @@ import {
   OverflowMenuItem,
   Spinner,
 } from "@patternfly/react-core";
-import {
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-} from "@patternfly/react-core/deprecated";
 import {
   EditAltIcon,
+  EllipsisVIcon,
   ExternalLinkAltIcon,
   Remove2Icon,
   ShareAltIcon,
@@ -255,19 +255,32 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                         </OverflowMenuItem>
                         <OverflowMenuItem>
                           <Dropdown
-                            position="right"
-                            toggle={
-                              <KebabToggle
-                                onToggle={(_event, open) =>
-                                  toggleOpen(resource._id, "contextOpen", open)
-                                }
-                              />
+                            popperProps={{
+                              position: "right",
+                            }}
+                            onOpenChange={(isOpen) =>
+                              toggleOpen(resource._id, "contextOpen", isOpen)
                             }
-                            isOpen={details[resource._id]?.contextOpen}
-                            isPlain
-                            dropdownItems={[
+                            toggle={(ref) => (
+                              <MenuToggle
+                                variant="plain"
+                                ref={ref}
+                                onClick={() =>
+                                  toggleOpen(
+                                    resource._id,
+                                    "contextOpen",
+                                    !details[resource._id]?.contextOpen,
+                                  )
+                                }
+                                isExpanded={details[resource._id]?.contextOpen}
+                              >
+                                <EllipsisVIcon />
+                              </MenuToggle>
+                            )}
+                            isOpen={!!details[resource._id]?.contextOpen}
+                          >
+                            <DropdownList>
                               <DropdownItem
-                                key="edit"
                                 isDisabled={
                                   details[resource._id]?.permissions?.length ===
                                   0
@@ -281,9 +294,8 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                                 }
                               >
                                 <EditAltIcon /> {t("edit")}
-                              </DropdownItem>,
+                              </DropdownItem>
                               <ContinueCancelModal
-                                key="unShare"
                                 buttonTitle={
                                   <>
                                     <Remove2Icon /> {t("unShare")}
@@ -300,25 +312,39 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                                 }
                               >
                                 {t("unShareAllConfirm")}
-                              </ContinueCancelModal>,
-                            ]}
-                          />
+                              </ContinueCancelModal>
+                            </DropdownList>
+                          </Dropdown>
                         </OverflowMenuItem>
                       </OverflowMenuGroup>
                     </OverflowMenuContent>
                     <OverflowMenuControl>
                       <Dropdown
-                        position="right"
-                        toggle={
-                          <KebabToggle
-                            onToggle={(_event, open) =>
-                              toggleOpen(resource._id, "contextOpen", open)
-                            }
-                          />
+                        popperProps={{
+                          position: "right",
+                        }}
+                        onOpenChange={(isOpen) =>
+                          toggleOpen(resource._id, "contextOpen", isOpen)
                         }
-                        isOpen={details[resource._id]?.contextOpen}
-                        isPlain
-                        dropdownItems={[
+                        toggle={(ref) => (
+                          <MenuToggle
+                            variant="plain"
+                            ref={ref}
+                            isExpanded={details[resource._id]?.contextOpen}
+                            onClick={() =>
+                              toggleOpen(
+                                resource._id,
+                                "contextOpen",
+                                !details[resource._id]?.contextOpen,
+                              )
+                            }
+                          >
+                            <EllipsisVIcon />
+                          </MenuToggle>
+                        )}
+                        isOpen={!!details[resource._id]?.contextOpen}
+                      >
+                        <DropdownList>
                           <OverflowMenuDropdownItem
                             key="share"
                             isShared
@@ -327,16 +353,19 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                             }
                           >
                             <ShareAltIcon /> {t("share")}
-                          </OverflowMenuDropdownItem>,
+                          </OverflowMenuDropdownItem>
                           <OverflowMenuDropdownItem
                             key="edit"
                             isShared
                             onClick={() =>
                               toggleOpen(resource._id, "editDialogOpen", true)
                             }
+                            isDisabled={
+                              details[resource._id]?.permissions?.length === 0
+                            }
                           >
                             <EditAltIcon /> {t("edit")}
-                          </OverflowMenuDropdownItem>,
+                          </OverflowMenuDropdownItem>
                           <ContinueCancelModal
                             key="unShare"
                             buttonTitle={
@@ -354,9 +383,9 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                             }
                           >
                             {t("unShareAllConfirm")}
-                          </ContinueCancelModal>,
-                        ]}
-                      />
+                          </ContinueCancelModal>
+                        </DropdownList>
+                      </Dropdown>
                     </OverflowMenuControl>
                   </OverflowMenu>
                 </Td>