feat(context menu): add prop to hide the context menu kebab (#250)

Add demo option to hide kebab context menus (#14)

add condition to contextSpace to fix label size

add check to TaskPill

remove hideContextMenuKebab from withContextMenuProps

add hideContextMenuKebab to NodeLabelProps to fix error

Author: jenny-s51

packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx

@@ -180,6 +180,7 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
             showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus}
             statusDecoratorTooltip={nodeElement.getNodeStatus()}
             onContextMenu={options.contextMenus ? onContextMenu : undefined}
+            hideContextMenuKebab={options.hideKebabMenu}
             onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined}
             onHideCreateConnector={onHideCreateConnector}
             labelIcon={options.icons && LabelIcon && <LabelIcon noVerticalAlign />}

packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx

@@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => {
           >
             Context Menus
           </SelectOption>
+          <SelectOption
+            hasCheckbox
+            value="Hide context kebab menu"
+            isSelected={options.nodeOptions.hideKebabMenu}
+            isDisabled={!options.nodeOptions.contextMenus}
+            onClick={() =>
+              options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu })
+            }
+          >
+            Hide kebab for context menu
+          </SelectOption>
           <SelectOption
             hasCheckbox
             value="Rectangle Groups"

packages/demo-app-ts/src/demos/topologyPackageDemo/generator.ts

@@ -88,6 +88,7 @@ export interface GeneratorNodeOptions {
   badges?: boolean;
   icons?: boolean;
   contextMenus?: boolean;
+  hideKebabMenu?: boolean;
   hulledOutline?: boolean;
 }
 

packages/module/src/components/nodes/DefaultNode.tsx

@@ -120,6 +120,8 @@ interface DefaultNodeProps {
   contextMenuOpen?: boolean;
   /** Flag indicating the label should move to the top layer when the node is hovered, set to `false` if you are already using TOP_LAYER on hover */
   raiseLabelOnHover?: boolean; // TODO: Update default to be false, assume demo code will be followed
+  /** Hide context menu kebab for the node  */
+  hideContextMenuKebab?: boolean;
 }
 
 const SCALE_UP_TIME = 200;
@@ -169,7 +171,8 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     onShowCreateConnector,
     onContextMenu,
     contextMenuOpen,
-    raiseLabelOnHover = true
+    raiseLabelOnHover = true,
+    hideContextMenuKebab
   }) => {
     const [hovered, hoverRef] = useHover();
     const status = nodeStatus || element.getNodeStatus();
@@ -370,6 +373,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
               badgeLocation={badgeLocation}
               onContextMenu={onContextMenu}
               contextMenuOpen={contextMenuOpen}
+              hideContextMenuKebab={hideContextMenuKebab}
               hover={isHover}
               labelIconClass={labelIconClass}
               labelIcon={labelIcon}

packages/module/src/components/nodes/labels/NodeLabel.tsx

@@ -43,6 +43,7 @@ export type NodeLabelProps = {
   badgeBorderColor?: string;
   badgeClassName?: string;
   badgeLocation?: BadgeLocation;
+  hideContextMenuKebab?: boolean;
 } & Partial<WithContextMenuProps>;
 
 /**
@@ -77,6 +78,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
   dropTarget,
   onContextMenu,
   contextMenuOpen,
+  hideContextMenuKebab,
   actionIcon,
   actionIconClassName,
   onActionIconClick,
@@ -124,7 +126,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
     const height = Math.max(textSize.height, badgeSize?.height ?? 0) + paddingY * 2;
     const iconSpace = labelIconClass || labelIcon ? (height + paddingY * 0.5) / 2 : 0;
     const actionSpace = actionIcon && actionSize ? actionSize.width : 0;
-    const contextSpace = onContextMenu && contextSize ? contextSize.width : 0;
+    const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width : 0;
     const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + actionSpace + contextSpace + paddingX;
     const secondaryWidth = secondaryLabel && secondaryTextSize ? secondaryTextSize.width + 2 * paddingX : 0;
     const width = Math.max(primaryWidth, secondaryWidth);
@@ -184,6 +186,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
     labelIcon,
     actionIcon,
     actionSize,
+    hideContextMenuKebab,
     onContextMenu,
     contextSize,
     secondaryLabel,
@@ -293,7 +296,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
           />
         </>
       )}
-      {textSize && onContextMenu && (
+      {textSize && onContextMenu && !hideContextMenuKebab && (
         <>
           <line
             className={css(styles.topologyNodeSeparator)}

packages/module/src/pipelines/components/nodes/TaskNode.tsx

@@ -100,6 +100,8 @@ export interface TaskNodeProps {
   onContextMenu?: (e: React.MouseEvent) => void;
   /** Flag indicating that the context menu for the node is currently open  */
   contextMenuOpen?: boolean;
+  /** Hide context menu kebab for the node  */
+  hideContextMenuKebab?: boolean;
   /** Number of shadowed pills to show  */
   shadowCount?: number;
   /** Offset for each shadow  */

packages/module/src/pipelines/components/nodes/TaskPill.tsx

@@ -71,6 +71,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     hasWhenExpression = false,
     onContextMenu,
     contextMenuOpen,
+    hideContextMenuKebab,
     actionIcon,
     actionIconClassName,
     onActionIconClick,
@@ -160,7 +161,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
       const actionSpace = actionIcon && actionSize ? actionSize.width + paddingX : 0;
 
       const contextStartX = actionStartX + actionSpace;
-      const contextSpace = onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0;
+      const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0;
 
       const pillWidth = contextStartX + contextSpace + paddingX / 2;
 
@@ -198,6 +199,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
       badge,
       actionIcon,
       actionSize,
+      hideContextMenuKebab,
       onContextMenu,
       contextSize,
       verticalLayout,
@@ -429,7 +431,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
             />
           </>
         )}
-        {textSize && onContextMenu && (
+        {textSize && onContextMenu && !hideContextMenuKebab && (
           <>
             <line
               className={css(topologyStyles.topologyNodeSeparator)}