Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(Dropdowns):Refactor the components across the hawtio to use the PF5 dropdown instead of old deprecate ones #960

Merged
merged 1 commit into from
Jun 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/src/examples/example3/Example3HeaderItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
62 changes: 38 additions & 24 deletions packages/hawtio/src/plugins/camel/contexts/ContextToolbar.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -90,8 +103,10 @@ export const ContextToolbar: React.FunctionComponent<{
}

const onDeleteClicked = () => {
setIsDropdownOpen(false)
handleConfirmDeleteToggle()
if (isDeleteEnabled()) {
setIsDropdownOpen(false)
handleConfirmDeleteToggle()
}
}

const onDeleteConfirmClicked = () => {
Expand Down Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
24 changes: 16 additions & 8 deletions packages/hawtio/src/plugins/camel/endpoints/EndpointsStats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}
Expand Down
53 changes: 33 additions & 20 deletions packages/hawtio/src/plugins/camel/routes/CamelRoutes.tsx
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
44 changes: 28 additions & 16 deletions packages/hawtio/src/plugins/connect/remote/Remote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -218,19 +226,23 @@ const ConnectionItem: React.FunctionComponent<{
</Button>
<Dropdown
key={`connection-action-dropdown-${id}`}
isPlain
tadayosi marked this conversation as resolved.
Show resolved Hide resolved
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>
Expand Down
25 changes: 17 additions & 8 deletions packages/hawtio/src/plugins/runtime/SysProps.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { objectSorter } from '@hawtiosrc/util/objects'
import {
Bullseye,
Dropdown,
DropdownItem,
EmptyState,
EmptyStateBody,
EmptyStateIcon,
Expand All @@ -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'
Expand Down Expand Up @@ -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)}
Expand Down
Loading
Loading