refactor(Dropdowns):Refactor the components across the hawtio to use …

…the PF5 dropdown instead of old deprecate ones
hawtio · Jun 11, 2024 · e23033b · e23033b
1 parent de23949
commit e23033b
Show file tree

Hide file tree

Showing 12 changed files with 270 additions and 154 deletions.
diff --git a/app/src/examples/example3/Example3HeaderItems.tsx b/app/src/examples/example3/Example3HeaderItems.tsx
@@ -54,8 +54,9 @@ export const Example3HeaderItem2: React.FunctionComponent = () => {
     <Dropdown
       id='example3-header-item2-dropdown'
       onSelect={onSelect}
+      onOpenChange={setIsOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle id='example3-header-item2-dropdown-toggle' ref={toggleRef} onClick={onToggle}>
+        <MenuToggle variant='plain' id='example3-header-item2-dropdown-toggle' ref={toggleRef} onClick={onToggle}>
           Example 3
         </MenuToggle>
       )}

diff --git a/packages/hawtio/src/plugins/camel/contexts/ContextToolbar.tsx b/packages/hawtio/src/plugins/camel/contexts/ContextToolbar.tsx
@@ -1,8 +1,21 @@
 import { eventService } from '@hawtiosrc/core'
 import { workspace } from '@hawtiosrc/plugins/shared'
-import { Button, Modal, ModalVariant, Skeleton, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated'
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Modal,
+  ModalVariant,
+  Skeleton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from '@patternfly/react-core'
 import { AsleepIcon, PlayIcon, Remove2Icon } from '@patternfly/react-icons'
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon'
 import React, { useState } from 'react'
 import {
   CONTEXT_OPERATIONS,
@@ -90,8 +103,10 @@ export const ContextToolbar: React.FunctionComponent<{
   }
 
   const onDeleteClicked = () => {
-    setIsDropdownOpen(false)
-    handleConfirmDeleteToggle()
+    if (isDeleteEnabled()) {
+      setIsDropdownOpen(false)
+      handleConfirmDeleteToggle()
+    }
   }
 
   const onDeleteConfirmClicked = () => {
@@ -187,18 +202,11 @@ export const ContextToolbar: React.FunctionComponent<{
   const dropdownItems = [
     <DropdownItem
       key='delete'
-      component={
-        <Button
-          variant='plain'
-          isDisabled={
-            !(firstContext && firstContext.node.hasInvokeRights(CONTEXT_OPERATIONS.stop)) || !isDeleteEnabled()
-          }
-          onClick={onDeleteClicked}
-        >
-          <Remove2Icon /> Delete
-        </Button>
-      }
-    />,
+      isDisabled={!(firstContext && firstContext.node.hasInvokeRights(CONTEXT_OPERATIONS.stop)) || !isDeleteEnabled()}
+      onClick={onDeleteClicked}
+    >
+      <Remove2Icon /> Delete
+    </DropdownItem>,
   ]
 
   return (
@@ -208,16 +216,22 @@ export const ContextToolbar: React.FunctionComponent<{
           {toolbarButtons}
           <ToolbarItem id='camel-contexts-toolbar-item-dropdown'>
             <Dropdown
-              toggle={
-                <KebabToggle
+              onSelect={() => onDropdownToggle(!isDropdownOpen)}
+              onOpenChange={onDropdownToggle}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  variant='plain'
                   id='camel-contexts-toolbar-item-dropdown-toggle'
-                  onToggle={(_event, isOpen: boolean) => onDropdownToggle(isOpen)}
-                />
-              }
+                  onClick={() => onDropdownToggle(!isDropdownOpen)}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isDropdownOpen}
-              dropdownItems={dropdownItems}
-              isPlain
-            />
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>

diff --git a/packages/hawtio/src/plugins/camel/endpoints/EndpointsStats.tsx b/packages/hawtio/src/plugins/camel/endpoints/EndpointsStats.tsx
@@ -16,8 +16,13 @@ import {
   ToolbarFilter,
   ToolbarGroup,
   EmptyStateHeader,
+  DropdownItem,
+  Dropdown,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
 } from '@patternfly/react-core'
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'
+
 import { Table, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table'
 import { SearchIcon } from '@patternfly/react-icons'
 import { objectSorter } from '@hawtiosrc/util/objects'
@@ -137,18 +142,21 @@ export const EndpointStats: React.FunctionComponent = () => {
               data-testid='attribute-select'
               onSelect={() => setIsDropdownOpen(false)}
               defaultValue='url'
-              toggle={
-                <DropdownToggle
+              onOpenChange={setIsDropdownOpen}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
                   data-testid='attribute-select-toggle'
                   id='toggle-basic'
-                  onToggle={(_event, val) => setIsDropdownOpen(val)}
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                 >
                   {attributes.find(att => att.key === attributeMenuItem)?.value}
-                </DropdownToggle>
-              }
+                </MenuToggle>
+              )}
               isOpen={isDropdownOpen}
-              dropdownItems={dropdownItems}
-            />
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
 
             <ToolbarFilter
               chips={filters}

diff --git a/packages/hawtio/src/plugins/camel/routes/CamelRoutes.tsx b/packages/hawtio/src/plugins/camel/routes/CamelRoutes.tsx
@@ -1,14 +1,26 @@
 import { eventService } from '@hawtiosrc/core'
 import { HawtioEmptyCard, HawtioLoadingCard, workspace } from '@hawtiosrc/plugins/shared'
 import { objectSorter } from '@hawtiosrc/util/objects'
-import { Button, Label, Modal, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated'
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Label,
+  MenuToggle,
+  MenuToggleElement,
+  Modal,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from '@patternfly/react-core'
 import { AsleepIcon, PlayIcon, Remove2Icon } from '@patternfly/react-icons'
 import { Table, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table'
 import React, { useContext, useEffect, useState } from 'react'
 import { CamelContext } from '../context'
 import { CamelRoute } from './route'
 import { routesService } from './routes-service'
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon'
 
 const ROUTES_REFRESH_INTERVAL = 10000 // milliseconds
 
@@ -347,16 +359,11 @@ const CamelRoutesToolbar: React.FunctionComponent<{
   const dropdownItems = [
     <DropdownItem
       key='action'
-      component={
-        <Button
-          variant='plain'
-          isDisabled={!routesService.canDeleteRoute(firstRoute.node) || !isSuspendEnabled('Stopped')}
-          onClick={onDeleteClicked}
-        >
-          <Remove2Icon /> Delete
-        </Button>
-      }
-    />,
+      isDisabled={!routesService.canDeleteRoute(firstRoute.node) || !isSuspendEnabled('Stopped')}
+      onClick={onDeleteClicked}
+    >
+      <Remove2Icon /> Delete
+    </DropdownItem>,
   ]
 
   return (
@@ -365,16 +372,22 @@ const CamelRoutesToolbar: React.FunctionComponent<{
         {toolbarButtons}
         <ToolbarItem id='camel-routes-toolbar-item-dropdown'>
           <Dropdown
-            toggle={
-              <KebabToggle
+            onSelect={() => onDropdownToggle(!isDropdownOpen)}
+            onOpenChange={setIsDropdownOpen}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                variant='plain'
                 id='camel-routes-toolbar-item-dropdown-toggle'
-                onToggle={(_event, isOpen: boolean) => onDropdownToggle(isOpen)}
-              />
-            }
+                onClick={() => onDropdownToggle(!isDropdownOpen)}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isDropdownOpen}
-            dropdownItems={dropdownItems}
-            isPlain
-          />
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>

diff --git a/packages/hawtio/src/plugins/connect/remote/Remote.tsx b/packages/hawtio/src/plugins/connect/remote/Remote.tsx
@@ -13,21 +13,26 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Icon,
+  MenuToggle,
+  MenuToggleElement,
   Modal,
   ModalVariant,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
 } from '@patternfly/react-core'
-import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated'
 import { PluggedIcon, PlusIcon, UnpluggedIcon } from '@patternfly/react-icons'
 import React, { useContext, useEffect, useState } from 'react'
 import { DELETE } from '../connections'
 import { ConnectContext } from '../context'
 import { log } from '../globals'
 import { ConnectionModal } from './ConnectionModal'
 import { ImportModal } from './ImportModal'
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon'
 
 export const Remote: React.FunctionComponent = () => {
   const { connections } = useContext(ConnectContext)
@@ -76,18 +81,21 @@ const RemoteToolbar: React.FunctionComponent = () => {
         <ToolbarItem>
           <Dropdown
             key='connect-toolbar-dropdown'
-            isPlain
             isOpen={isDropdownOpen}
-            toggle={<KebabToggle onToggle={() => setIsDropdownOpen(!isDropdownOpen)} />}
-            dropdownItems={[
+            onOpenChange={setIsDropdownOpen}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle ref={toggleRef} onClick={() => setIsDropdownOpen(!isDropdownOpen)}></MenuToggle>
+            )}
+          >
+            <DropdownList>
               <DropdownItem key='connect-toolbar-dropdown-import' onClick={handleImportModalToggle}>
                 Import connections
-              </DropdownItem>,
+              </DropdownItem>
               <DropdownItem key='connect-toolbar-dropdown-export' onClick={exportConnections}>
                 Export connections
-              </DropdownItem>,
-            ]}
-          />
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
       <ConnectionModal mode='add' isOpen={isAddOpen} onClose={handleAddToggle} input={initialConnection} />
@@ -218,19 +226,23 @@ const ConnectionItem: React.FunctionComponent<{
           </Button>
           <Dropdown
             key={`connection-action-dropdown-${id}`}
-            isPlain
-            position={DropdownPosition.right}
             isOpen={isDropdownOpen}
-            toggle={<KebabToggle onToggle={handleDropdownToggle} />}
-            dropdownItems={[
+            onOpenChange={setIsDropdownOpen}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle variant='plain' ref={toggleRef} onClick={handleDropdownToggle}>
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
               <DropdownItem key={`connection-action-edit-${id}`} onClick={handleEditToggle}>
                 Edit
-              </DropdownItem>,
+              </DropdownItem>
               <DropdownItem key={`connection-action-delete-${id}`} onClick={handleConfirmDeleteToggle}>
                 Delete
-              </DropdownItem>,
-            ]}
-          />
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
           <ConfirmDeleteModal />
         </DataListAction>
       </DataListItemRow>

diff --git a/packages/hawtio/src/plugins/runtime/SysProps.tsx b/packages/hawtio/src/plugins/runtime/SysProps.tsx
@@ -1,6 +1,8 @@
 import { objectSorter } from '@hawtiosrc/util/objects'
 import {
   Bullseye,
+  Dropdown,
+  DropdownItem,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
@@ -17,8 +19,10 @@ import {
   ToolbarGroup,
   ToolbarItem,
   EmptyStateHeader,
+  MenuToggleElement,
+  MenuToggle,
+  DropdownList,
 } from '@patternfly/react-core'
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'
 import { SearchIcon } from '@patternfly/react-icons'
 import { Table, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table'
 import React, { useEffect, useState } from 'react'
@@ -156,18 +160,23 @@ export const SysProps: React.FunctionComponent = () => {
               addToFilters()
             }}
             defaultValue='name'
-            toggle={
-              <DropdownToggle
+            onOpenChange={setIsDropdownOpen}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
                 data-testid='attribute-select-toggle'
                 id='toggle-basic'
-                onToggle={(_event, val) => setIsDropdownOpen(val)}
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                isExpanded={isDropdownOpen}
               >
                 {attributes.find(att => att.key === filteredAttribute)?.value}
-              </DropdownToggle>
-            }
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
             isOpen={isDropdownOpen}
-            dropdownItems={dropdownItems}
-          />
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
           <ToolbarFilter
             chips={searchTerm !== '' ? [...filters, `${filteredAttribute}:${searchTerm}`] : filters}
             deleteChip={(_e, filter) => onDeleteFilter(filter as string)}