From 2299061f20e0486c4c9c307f057c41b5ed81de10 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 16 Aug 2023 11:54:57 -0400 Subject: [PATCH 01/11] chore: upgrade v4 components to v5 in demo-app --- packages/demo-app-ts/src/App.tsx | 30 +- .../src/components/stylesComponentFactory.tsx | 2 +- .../src/utils/useTopologyOptions.tsx | 320 +++++++++++------- 3 files changed, 213 insertions(+), 139 deletions(-) diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx index ab373867..ee3014a0 100755 --- a/packages/demo-app-ts/src/App.tsx +++ b/packages/demo-app-ts/src/App.tsx @@ -10,25 +10,24 @@ import { Avatar, Brand, Radio, - Masthead, - MastheadMain, - MastheadToggle, - MastheadBrand, NavExpandable, PageSidebarBody, - MastheadContent, - PageToggleButton, Toolbar, - ToolbarContent, ToolbarGroup, - ToolbarItem + ToolbarItem, + Masthead, + MastheadToggle, + PageToggleButton, + MastheadContent, + MastheadBrand, + MastheadMain, + ToolbarContent } from '@patternfly/react-core'; +import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import imgBrand from './assets/images/imgBrand.svg'; import imgAvatar from './assets/images/imgAvatar.svg'; import Demos from './Demos'; import './App.css'; -import { BarsIcon } from '@patternfly/react-icons'; - interface AppState { activeItem: number | string; isNavOpen: boolean; @@ -153,13 +152,18 @@ class App extends React.Component<{}, AppState> { const AppHeader = ( - + this.setState({ isNavOpen: !isNavOpen })} + > - - + + {AppToolbar} diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx index 084d0b90..30f77ee9 100644 --- a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx @@ -53,7 +53,7 @@ const contextMenuItem = (label: string, i: number): React.ReactElement => { const createContextMenuItems = (...labels: string[]): React.ReactElement[] => labels.map(contextMenuItem); -const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth'); +const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Sub Menu-> Child1, Child2, Child3, -, Child4'); const stylesComponentFactory: ComponentFactory = ( kind: ModelKind, diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx index 7b3f36ce..5a7a2be1 100644 --- a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx +++ b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx @@ -1,31 +1,24 @@ import React from 'react'; import * as _ from 'lodash'; import { - Button, - Flex, - Split, - SplitItem, - TextInput, - ToolbarItem, - Tooltip + Button, + Dropdown, + DropdownItem, + DropdownList, + Flex, + MenuToggle, + MenuToggleElement, + Select, + SelectList, + SelectOption, + Split, + SplitItem, + TextInput, + ToolbarItem, + Tooltip } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition as DropdownPositionDeprecated, - DropdownToggle as DropdownToggleDeprecated, - Select, - SelectOption, - SelectVariant -} from '@patternfly/react-core/deprecated'; import { DefaultEdgeOptions, DefaultNodeOptions, GeneratorEdgeOptions, GeneratorNodeOptions } from '../data/generator'; -import { - EDGE_ANIMATION_SPEEDS, - EDGE_STYLES, - EDGE_TERMINAL_TYPES, - NODE_SHAPES, - NODE_STATUSES -} from './styleUtils'; +import { EDGE_ANIMATION_SPEEDS, EDGE_STYLES, EDGE_TERMINAL_TYPES, NODE_SHAPES, NODE_STATUSES } from './styleUtils'; import { Controller, Model, NodeShape } from '@patternfly/react-topology'; const GRAPH_LAYOUT_OPTIONS = ['x', 'y', 'visible', 'style', 'layout', 'scale', 'scaleExtent', 'layers']; @@ -74,115 +67,149 @@ export const useTopologyOptions = ( - setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}} + ) => ( + setLayoutDropdownOpen(!layoutDropdownOpen)}> + {layout} + + )} isOpen={layoutDropdownOpen} - dropdownItems={[ - updateLayout('Force')}> + > + + updateLayout('Force')}> Force - , - updateLayout('Dagre')}> + + updateLayout('Dagre')}> Dagre - , - updateLayout('Cola')}> + + updateLayout('Cola')}> Cola - , - updateLayout('ColaGroups')}> + + updateLayout('ColaGroups')}> ColaGroups - , - updateLayout('ColaNoForce')}> + + updateLayout('ColaNoForce')}> ColaNoForce - , - updateLayout('Grid')}> + + updateLayout('Grid')}> Grid - , - updateLayout('Concentric')}> + + updateLayout('Concentric')}> Concentric - , - updateLayout('BreadthFirst')}> + + updateLayout('BreadthFirst')}> BreadthFirst - - ]} - /> + + + ); const renderNodeOptionsDropdown = () => { const selectContent = ( -
+ setNodeOptions(prev => ({ ...prev, nodeLabels: !prev.nodeLabels }))} - /> + isSelected={nodeOptions.nodeLabels} + onClick={() => setNodeOptions((prev) => ({ ...prev, nodeLabels: !prev.nodeLabels }))} + > + Labels + setNodeOptions(prev => ({ ...prev, nodeSecondaryLabels: !prev.nodeSecondaryLabels }))} - /> + isSelected={nodeOptions.nodeSecondaryLabels} + onClick={() => setNodeOptions((prev) => ({ ...prev, nodeSecondaryLabels: !prev.nodeSecondaryLabels }))} + > + Secondary Labels + 1} + isSelected={nodeOptions.statuses.length > 1} onClick={() => - setNodeOptions(prev => ({ + setNodeOptions((prev) => ({ ...prev, statuses: prev.statuses.length > 1 ? DefaultNodeOptions.statuses : NODE_STATUSES })) } - /> + > + Status + - setNodeOptions(prev => ({ + setNodeOptions((prev) => ({ ...prev, statusDecorators: !prev.statusDecorators, showDecorators: !prev.showDecorators })) } - /> + > + Decorators + setNodeOptions(prev => ({ ...prev, nodeBadges: !prev.nodeBadges }))} - /> + isSelected={nodeOptions.nodeBadges} + onClick={() => setNodeOptions((prev) => ({ ...prev, nodeBadges: !prev.nodeBadges }))} + > + Badges + setNodeOptions(prev => ({ ...prev, nodeIcons: !prev.nodeIcons }))} - /> + isSelected={nodeOptions.nodeIcons} + onClick={() => setNodeOptions((prev) => ({ ...prev, nodeIcons: !prev.nodeIcons }))} + > + Icons + setNodeOptions(prev => ({ ...prev, contextMenus: !prev.contextMenus }))} - /> -
+ isSelected={nodeOptions.contextMenus} + onClick={() => setNodeOptions((prev) => ({ ...prev, contextMenus: !prev.contextMenus }))} + > + Context Menus + + + ); + + const nodeOptionsToggle = (toggleRef: React.Ref) => ( + setNodeOptionsOpen((prev) => !prev)} + isExpanded={nodeOptionsOpen} + style={ + { + width: '250px' + } as React.CSSProperties + } + > + Node options + ); return ( - {}} isOpen={nodeOptionsOpen} placeholder="Node options" toggle={nodeOptionsToggle}> + {selectContent} + ); }; const toggleNodeShape = (shape: NodeShape): void => { const index = nodeOptions.shapes.indexOf(shape); if (index >= 0) { - setNodeOptions(prev => ({ + setNodeOptions((prev) => ({ ...prev, shapes: [...prev.shapes.slice(0, index), ...prev.shapes.slice(index + 1)] })); } else { - setNodeOptions(prev => ({ + setNodeOptions((prev) => ({ ...prev, shapes: [...prev.shapes, shape] })); @@ -191,92 +218,127 @@ export const useTopologyOptions = ( const renderNodeShapesDropdown = () => { const selectContent = ( -
- {NODE_SHAPES.map(shape => ( + + {NODE_SHAPES.map((shape) => ( toggleNodeShape(shape)} - /> + > + {shape} + ))} -
+ + ); + + const nodeShapesToggle = (toggleRef: React.Ref) => ( + setNodeShapesOpen((prev) => !prev)} + isExpanded={nodeShapesOpen} + style={ + { + width: '250px' + } as React.CSSProperties + } + > + Node shapes + ); return ( - {}} isOpen={nodeShapesOpen} toggle={nodeShapesToggle}> + {selectContent} + ); }; const renderEdgeOptionsDropdown = () => { const selectContent = ( -
+ 1} + hasCheckbox + isSelected={edgeOptions.edgeStatuses.length > 1} onClick={() => - setEdgeOptions(prev => ({ + setEdgeOptions((prev) => ({ ...prev, edgeStatuses: prev.edgeStatuses.length > 1 ? DefaultEdgeOptions.edgeStatuses : NODE_STATUSES })) } - /> + > + Status + 1} + hasCheckbox + isSelected={edgeOptions.edgeStyles.length > 1} onClick={() => - setEdgeOptions(prev => ({ + setEdgeOptions((prev) => ({ ...prev, edgeStyles: prev.edgeStyles.length > 1 ? DefaultEdgeOptions.edgeStyles : EDGE_STYLES })) } - /> + > + Styles + 1} + hasCheckbox + isSelected={edgeOptions.edgeAnimations.length > 1} onClick={() => - setEdgeOptions(prev => ({ + setEdgeOptions((prev) => ({ ...prev, edgeAnimations: prev.edgeAnimations.length > 1 ? DefaultEdgeOptions.edgeAnimations : EDGE_ANIMATION_SPEEDS })) } - /> + > + Animations + 1} + hasCheckbox + isSelected={edgeOptions.terminalTypes.length > 1} onClick={() => - setEdgeOptions(prev => ({ + setEdgeOptions((prev) => ({ ...prev, terminalTypes: prev.terminalTypes.length > 1 ? DefaultEdgeOptions.terminalTypes : EDGE_TERMINAL_TYPES })) } - /> + > + Terminal type + setEdgeOptions(prev => ({ ...prev, edgeTags: !prev.edgeTags }))} - /> -
+ hasCheckbox + isSelected={edgeOptions.edgeTags} + onClick={() => setEdgeOptions((prev) => ({ ...prev, edgeTags: !prev.edgeTags }))} + > + Tags + + + ); + const edgeOptionsToggle = (toggleRef: React.Ref) => ( + setEdgeOptionsOpen((prev) => !prev)} + isExpanded={edgeOptionsOpen} + style={ + { + width: '250px' + } as React.CSSProperties + } + > + Edge options + ); return ( - {}} isOpen={edgeOptionsOpen} toggle={edgeOptionsToggle}> + {selectContent} + ); }; @@ -295,8 +357,8 @@ export const useTopologyOptions = ( ...currentModel.graph, ..._.pick(savedModel.graph, GRAPH_LAYOUT_OPTIONS) }; - currentModel.nodes = currentModel.nodes.map(n => { - const savedNode = savedModel.nodes.find(sn => sn.id === n.id); + currentModel.nodes = currentModel.nodes.map((n) => { + const savedNode = savedModel.nodes.find((sn) => sn.id === n.id); if (!savedNode) { return n; } @@ -341,28 +403,36 @@ export const useTopologyOptions = ( aria-label="nodes" type="number" value={numNodes || ''} - onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null))} + onChange={(_event, val: string) => + val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null) + } /> Edges: (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null))} + onChange={(_event, val: string) => + val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null) + } /> Groups: (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null))} + onChange={(_event, val: string) => + val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null) + } /> Nesting Depth: (val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null))} + onChange={(_event, val: string) => + val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null) + } /> - } - /> + ref={nodeRef} + // prevent this DropdownItem from executing like a normal action item + onClick={(e) => e.stopPropagation()} + // mouse enter will open the sub menu + onMouseEnter={() => setOpen(true)} + onMouseLeave={(e) => { + // if the mouse leaves this item, close the sub menu only if the mouse did not enter the sub menu itself + if (!subMenuRef.current || !subMenuRef.current.contains(e.relatedTarget as Node)) { + setOpen(false); + } + }} + onKeyDown={(e) => { + // open the sub menu on enter or right arrow + if (e.key === 'ArrowRight' || e.key === 'Enter') { + setOpen(true); + e.stopPropagation(); + } + }} + > + {label} + + { + onRequestClose={(e) => { // only close the sub menu if clicking anywhere outside the menu item that owns the sub menu if (!e || !nodeRef.current || !nodeRef.current.contains(e.target as Node)) { setOpen(false); @@ -72,13 +64,13 @@ const ContextSubMenuItem: React.FunctionComponent = ({ ref={subMenuRef} role="presentation" className="pf-v5-c-dropdown pf-m-expanded" - onMouseLeave={e => { + onMouseLeave={(e) => { // only close the sub menu if the mouse does not enter the item if (!nodeRef.current || !nodeRef.current.contains(e.relatedTarget as Node)) { setOpen(false); } }} - onKeyDown={e => { + onKeyDown={(e) => { // close the sub menu on left arrow if (e.key === 'ArrowLeft') { setOpen(false); @@ -86,9 +78,12 @@ const ContextSubMenuItem: React.FunctionComponent = ({ } }} > - + ) => } + className={css(topologyStyles.topologyContextMenuCDropdownMenu)} + > {children} - + diff --git a/packages/module/src/components/contextmenu/index.ts b/packages/module/src/components/contextmenu/index.ts index 9b863a60..6b786c00 100644 --- a/packages/module/src/components/contextmenu/index.ts +++ b/packages/module/src/components/contextmenu/index.ts @@ -2,4 +2,4 @@ export { default as ContextMenu } from './ContextMenu'; export { default as ContextSubMenuItem } from './ContextSubMenuItem'; // re-export dropdown components as context menu components -export { DropdownItem as ContextMenuItem, DropdownSeparator as ContextMenuSeparator } from '@patternfly/react-core/deprecated'; +export { DropdownItem as ContextMenuItem } from '@patternfly/react-core'; From d4c6295a8d3b65fa47fbe3611215c7d9405341b8 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 16 Aug 2023 11:57:10 -0400 Subject: [PATCH 03/11] revert stylescomponentfactory --- packages/demo-app-ts/src/components/stylesComponentFactory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx index 30f77ee9..084d0b90 100644 --- a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx @@ -53,7 +53,7 @@ const contextMenuItem = (label: string, i: number): React.ReactElement => { const createContextMenuItems = (...labels: string[]): React.ReactElement[] => labels.map(contextMenuItem); -const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Sub Menu-> Child1, Child2, Child3, -, Child4'); +const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth'); const stylesComponentFactory: ComponentFactory = ( kind: ModelKind, From 72461c29c0f79bc5420bec32fbfdc46ae222f4a9 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 16 Aug 2023 15:49:59 -0400 Subject: [PATCH 04/11] fix: add missing imports to contextmenu.tsx --- packages/module/src/components/contextmenu/ContextMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx index e6762cd6..0c1744f4 100644 --- a/packages/module/src/components/contextmenu/ContextMenu.tsx +++ b/packages/module/src/components/contextmenu/ContextMenu.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import { DropdownContext as DropdownContextDeprecated } from '@patternfly/react-core/deprecated'; import { Dropdown } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; From 2f5661bba2e10035203b6af2288bdcc06769530b Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 17 Aug 2023 09:53:45 -0400 Subject: [PATCH 05/11] fix import error and update contextmenuseparator component fix import error and update contextmenuseparator component --- packages/demo-app-ts/src/components/actionsComponentFactory.tsx | 2 +- .../demo-app-ts/src/components/pipelineComponentFactory.tsx | 2 +- packages/demo-app-ts/src/components/stylesComponentFactory.tsx | 2 +- packages/demo-app-ts/src/demos/ContextMenus.tsx | 2 +- .../content/examples/TopologyContextMenuDemo.tsx | 2 +- packages/module/src/components/contextmenu/index.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx index 503d0108..6b4d3625 100644 --- a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx @@ -22,7 +22,7 @@ import CustomPathNode from './CustomPathNode'; const contextMenuItem = (label: string, i: number): React.ReactElement => { if (label === '-') { - return ; + return ; } if (label.includes('->')) { const parent = label.slice(0, label.indexOf('->')); diff --git a/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx b/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx index 7d029799..a33ef892 100644 --- a/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx @@ -25,7 +25,7 @@ export const GROUPED_EDGE_TYPE = 'GROUPED_EDGE'; const contextMenuItem = (label: string, i: number): React.ReactElement => { if (label === '-') { - return ; + return ; } return ( // eslint-disable-next-line no-alert diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx index 084d0b90..abc1ef7d 100644 --- a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx @@ -41,7 +41,7 @@ interface EdgeProps { const contextMenuItem = (label: string, i: number): React.ReactElement => { if (label === '-') { - return ; + return ; } return ( // eslint-disable-next-line no-alert diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx index 6c55ff05..ec9c58f5 100644 --- a/packages/demo-app-ts/src/demos/ContextMenus.tsx +++ b/packages/demo-app-ts/src/demos/ContextMenus.tsx @@ -20,7 +20,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'; const contextMenuItem = (label: string, i: number): React.ReactElement => { if (label === '-') { - return ; + return ; } return ( // eslint-disable-next-line no-alert diff --git a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx index be6c8bc9..b1326066 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx +++ b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx @@ -56,7 +56,7 @@ const customLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout const customComponentFactory: ComponentFactory = (kind: ModelKind, type: string) => { const contextMenuItem = (label: string, i: number): React.ReactElement => { if (label === '-') { - return ; + return ; } return ( // eslint-disable-next-line no-alert diff --git a/packages/module/src/components/contextmenu/index.ts b/packages/module/src/components/contextmenu/index.ts index 6b786c00..5489acdf 100644 --- a/packages/module/src/components/contextmenu/index.ts +++ b/packages/module/src/components/contextmenu/index.ts @@ -2,4 +2,4 @@ export { default as ContextMenu } from './ContextMenu'; export { default as ContextSubMenuItem } from './ContextSubMenuItem'; // re-export dropdown components as context menu components -export { DropdownItem as ContextMenuItem } from '@patternfly/react-core'; +export { DropdownItem as ContextMenuItem, Divider as ContextMenuSeparator } from '@patternfly/react-core'; From 6c90cf49ee8b8a873fb1c22a2977ebdae303d099 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 17 Aug 2023 11:35:24 -0400 Subject: [PATCH 06/11] fix: menu toggle issue --- packages/module/src/components/contextmenu/ContextMenu.tsx | 5 +---- .../module/src/components/contextmenu/ContextSubMenuItem.tsx | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx index 0c1744f4..67c429b1 100644 --- a/packages/module/src/components/contextmenu/ContextMenu.tsx +++ b/packages/module/src/components/contextmenu/ContextMenu.tsx @@ -49,10 +49,7 @@ const ContextMenu: React.FunctionComponent = ({ }} >
- ) => } - className={css(topologyStyles.topologyContextMenuCDropdownMenu)} - > + <>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}> {children}
diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx index e458ec0d..1c4a502c 100644 --- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx +++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx @@ -78,10 +78,7 @@ const ContextSubMenuItem: React.FunctionComponent = ({ } }} > - ) => } - className={css(topologyStyles.topologyContextMenuCDropdownMenu)} - > + <>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}> {children} From 2ad056f624509ad9107eda8a33a554647bcc86e6 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 17 Aug 2023 14:00:48 -0400 Subject: [PATCH 07/11] fix: remove deprecated dropdown context --- .../components/contextmenu/ContextMenu.tsx | 31 +++---------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx index 67c429b1..9d110af3 100644 --- a/packages/module/src/components/contextmenu/ContextMenu.tsx +++ b/packages/module/src/components/contextmenu/ContextMenu.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import { MenuToggle, MenuToggleElement } from '@patternfly/react-core'; -import { DropdownContext as DropdownContextDeprecated } from '@patternfly/react-core/deprecated'; import { Dropdown } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; import topologyStyles from '../../css/topology-components'; @@ -30,30 +28,11 @@ const ContextMenu: React.FunctionComponent = ({ return ( - -
- <>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}> - {children} - -
- +
+ <>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}> + {children} + +
); }; From e3cd8d1ec397a17673328751d689d82912ba6c74 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Tue, 22 Aug 2023 11:18:36 -0400 Subject: [PATCH 08/11] fix linting issue --- .../module/src/components/contextmenu/ContextSubMenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx index 1c4a502c..d6c97544 100644 --- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx +++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; +import { Dropdown, DropdownItem } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; import topologyStyles from '../../css/topology-components'; // FIXME fully qualified due to the effect of long build times on storybook From bc873136ab7d2444cdad6007281a9f9d25a1131a Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:26:09 -0400 Subject: [PATCH 09/11] fix dropdown toggle behavior --- .../src/utils/useTopologyOptions.tsx | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx index 5a7a2be1..f9000ed0 100644 --- a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx +++ b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx @@ -74,6 +74,7 @@ export const useTopologyOptions = ( )} isOpen={layoutDropdownOpen} + onOpenChange={(isOpen) => setLayoutDropdownOpen(isOpen)} > updateLayout('Force')}> @@ -108,7 +109,7 @@ export const useTopologyOptions = ( const renderNodeOptionsDropdown = () => { const selectContent = ( - + setLayoutDropdownOpen(isOpen)}> {}} isOpen={nodeOptionsOpen} placeholder="Node options" toggle={nodeOptionsToggle}> + ); @@ -249,7 +256,12 @@ export const useTopologyOptions = ( ); return ( - setNodeShapesOpen(isOpen)} + onSelect={() => {}} + isOpen={nodeShapesOpen} + toggle={nodeShapesToggle} + > {selectContent} ); @@ -336,7 +348,12 @@ export const useTopologyOptions = ( ); return ( - setEdgeOptionsOpen(isOpen)} + onSelect={() => {}} + isOpen={edgeOptionsOpen} + toggle={edgeOptionsToggle} + > {selectContent} ); From 89387e001bcb2ca30d5412ada9c929b68e27f7a0 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:27:18 -0400 Subject: [PATCH 10/11] revert selectlist --- packages/demo-app-ts/src/utils/useTopologyOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx index f9000ed0..851761e9 100644 --- a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx +++ b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx @@ -109,7 +109,7 @@ export const useTopologyOptions = ( const renderNodeOptionsDropdown = () => { const selectContent = ( - setLayoutDropdownOpen(isOpen)}> + Date: Fri, 8 Sep 2023 09:26:47 -0400 Subject: [PATCH 11/11] add handleRequestClose --- packages/module/src/components/contextmenu/ContextMenu.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx index 9d110af3..e4d59e1a 100644 --- a/packages/module/src/components/contextmenu/ContextMenu.tsx +++ b/packages/module/src/components/contextmenu/ContextMenu.tsx @@ -29,7 +29,11 @@ const ContextMenu: React.FunctionComponent = ({ return (
- <>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}> + <>} + className={css(topologyStyles.topologyContextMenuCDropdownMenu)} + > {children}