feat: Right click context menu

CHANGELOG.md

@@ -2,29 +2,25 @@
 
 ## [2.6.0](https://github.com/equinor/flyt/compare/v2.5.0...v2.6.0) (2024-09-11)
 
-
 ### Features
 
-* infinite scroll ([#788](https://github.com/equinor/flyt/issues/788)) ([ac85041](https://github.com/equinor/flyt/commit/ac850415f47c6922fafc0c8327079ed8a86c7922))
-* Main activity duration summary ([#768](https://github.com/equinor/flyt/issues/768)) ([2195660](https://github.com/equinor/flyt/commit/21956608bb28fec0c4f85b958aa848ea2ad2b84e))
-
+- infinite scroll ([#788](https://github.com/equinor/flyt/issues/788)) ([ac85041](https://github.com/equinor/flyt/commit/ac850415f47c6922fafc0c8327079ed8a86c7922))
+- Main activity duration summary ([#768](https://github.com/equinor/flyt/issues/768)) ([2195660](https://github.com/equinor/flyt/commit/21956608bb28fec0c4f85b958aa848ea2ad2b84e))
 
 ### Bug Fixes
 
-* Upgrade dependencies ([#796](https://github.com/equinor/flyt/issues/796)) ([494d1e7](https://github.com/equinor/flyt/commit/494d1e7fd7ec534d70b4ade0bef34f5cae029b3c))
+- Upgrade dependencies ([#796](https://github.com/equinor/flyt/issues/796)) ([494d1e7](https://github.com/equinor/flyt/commit/494d1e7fd7ec534d70b4ade0bef34f5cae029b3c))
 
 ## [2.5.0](https://github.com/equinor/flyt/compare/v2.4.0...v2.5.0) (2024-08-28)
 
-
 ### Features
 
-* Full name of users ([#778](https://github.com/equinor/flyt/issues/778)) ([2523e98](https://github.com/equinor/flyt/commit/2523e9829d6ad192400b641818901f2df3458e04))
-
+- Full name of users ([#778](https://github.com/equinor/flyt/issues/778)) ([2523e98](https://github.com/equinor/flyt/commit/2523e9829d6ad192400b641818901f2df3458e04))
 
 ### Bug Fixes
 
-* Disable spamming of add card buttons ([#784](https://github.com/equinor/flyt/issues/784)) ([668f1fa](https://github.com/equinor/flyt/commit/668f1fa802d925f62f0ee942b72240c0f6a7d89b))
-* display AxiosError message ([#774](https://github.com/equinor/flyt/issues/774)) ([76033a0](https://github.com/equinor/flyt/commit/76033a0e02572d190290b3ac52851582dd0faef9))
+- Disable spamming of add card buttons ([#784](https://github.com/equinor/flyt/issues/784)) ([668f1fa](https://github.com/equinor/flyt/commit/668f1fa802d925f62f0ee942b72240c0f6a7d89b))
+- display AxiosError message ([#774](https://github.com/equinor/flyt/issues/774)) ([76033a0](https://github.com/equinor/flyt/commit/76033a0e02572d190290b3ac52851582dd0faef9))
 
 ## [2.4.0](https://github.com/equinor/flyt/compare/v2.3.0...v2.4.0) (2024-08-06)
 

components/DeleteNodeDialog.tsx

@@ -13,7 +13,6 @@ import { ScrimDelete } from "./ScrimDelete";
 export function DeleteNodeDialog(props: {
   objectToDelete: NodeData;
   onClose: () => void;
-  visible: boolean;
 }) {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
@@ -44,8 +43,6 @@ export function DeleteNodeDialog(props: {
     }
   );
 
-  if (!props.visible) return null;
-
   const handleClose = () => props.onClose();
   const handleDelete = (includeChildren: boolean) =>
     deleteMutation.mutate({
@@ -84,7 +81,11 @@ export function DeleteNodeDialog(props: {
       open
       header={header}
       onClose={handleClose}
-      onConfirm={(_, includeChildren) => handleDelete(includeChildren)}
+      onConfirm={(_, includeChildren) =>
+        handleDelete(
+          type === mainActivity || type === choice || includeChildren
+        )
+      }
       error={deleteMutation.error}
       warningMessage={warningMessage}
       confirmMessage={confirmMessage}

components/Labels/ActiveFilterSection.tsx

@@ -3,7 +3,7 @@ import { Button, Chip } from "@equinor/eds-core-react";
 import { getLabel } from "services/labelsApi";
 import { getUpdatedLabel } from "utils/getUpdatedLabel";
 import { getUserById } from "services/userApi";
-import { stringToArray } from "utils/stringToArray";
+import { stringToArray } from "utils/stringHelpers";
 import { toggleQueryParam } from "utils/toggleQueryParam";
 import { unknownErrorToString } from "utils/isError";
 import { useQuery } from "react-query";

components/MenuItemExandable.tsx

@@ -0,0 +1,45 @@
+import { Menu } from "@equinor/eds-core-react";
+import { ReactElement, useState } from "react";
+import ExpandArrow from "../public/expand_arrow_right.svg";
+import styles from "./MenuItemExpandable.module.scss";
+
+type MenuItemExandableProps = {
+  text: string;
+  reverseExpandDir?: boolean;
+  children: ReactElement | ReactElement[];
+};
+
+export const MenuItemExandable = ({
+  text,
+  reverseExpandDir,
+  children,
+}: MenuItemExandableProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Menu.Item
+      ref={setAnchorEl}
+      onMouseEnter={() => setIsExpanded(true)}
+      onMouseLeave={() => setIsExpanded(false)}
+    >
+      <div>{text}</div>
+      <img
+        alt="right-arrow"
+        src={ExpandArrow.src}
+        className={styles.expandArrowContainer}
+      />
+      <Menu
+        style={{
+          marginLeft: reverseExpandDir ? "4px" : "-4px",
+        }}
+        open={isExpanded}
+        anchorEl={anchorEl}
+        placement={reverseExpandDir ? "left-start" : "right-start"}
+        className={styles.menu}
+      >
+        {children}
+      </Menu>
+    </Menu.Item>
+  );
+};

components/MenuItemExpandable.module.scss

@@ -0,0 +1,7 @@
+.menu > div {
+  padding: 0;
+}
+
+.expandArrowContainer {
+  margin-left: auto;
+}

components/canvas/Canvas.tsx

@@ -1,7 +1,7 @@
 import { CanvasButtons } from "components/CanvasButtons";
 import { ManageLabelBox } from "components/Labels/ManageLabelBox";
 import { ResetProcessButton } from "components/ResetProcessButton";
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import ReactFlow, {
   ControlButton,
   Controls,
@@ -43,6 +43,9 @@ import { useCopyPaste } from "./hooks/useCopyPaste";
 import { copyPasteNodeValidator } from "./utils/copyPasteValidators";
 import { validTarget } from "./utils/validTarget";
 import { useNodeAdd } from "./hooks/useNodeAdd";
+import { useContextMenu } from "./hooks/useContextMenu";
+import { ContextMenu } from "./ContextMenu";
+import { nodeValidityMap } from "./utils/nodeValidityHelper";
 
 type CanvasProps = {
   graph: Graph;
@@ -61,6 +64,7 @@ const Canvas = ({
   );
   const { userCanEdit } = useAccess(project);
   const { addNode } = useNodeAdd();
+  const ref = useRef<HTMLDivElement>(null);
 
   const shapeSize = { height: 140, width: 140 };
 
@@ -71,7 +75,9 @@ const Canvas = ({
   const [nodes, setNodes, onNodesChange] = useNodesState<NodeDataFull>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const [visibleDeleteNodeScrim, setVisibleDeleteNodeScrim] = useState(false);
+  const [nodeToBeDeleted, setNodeToBeDeleted] = useState<
+    Node<NodeData> | undefined
+  >(undefined);
   const [edgeToBeDeletedId, setEdgeToBeDeletedId] = useState<
     string | undefined
   >(undefined);
@@ -81,14 +87,24 @@ const Canvas = ({
   const { onNodeDragStart, onNodeDrag, onNodeDragStop } = useNodeDrag();
   const { mutate: mergeNode, merging } = useNodeMerge();
   const { deleteEdgeMutation } = useEdgeDelete();
+  const { menuData, onNodeContextMenu, onPaneContextMenu, closeContextMenu } =
+    useContextMenu(ref);
+
+  useEffect(() => {
+    !menuData && setHoveredNode(undefined);
+  }, [menuData]);
 
   const { socketConnected, socketReason } = useWebSocket();
-  useCopyPaste(
+  const { copyToClipboard, paste } = useCopyPaste(
     hoveredNode,
     (node: Node<NodeData>) =>
       hoveredNode?.id &&
       validTarget(node, hoveredNode, nodes, false) &&
-      addNode(hoveredNode.id, node.data, Position.Bottom),
+      addNode(
+        hoveredNode.id,
+        node.data,
+        node.type === NodeTypes.mainActivity ? Position.Right : Position.Bottom
+      ),
     copyPasteNodeValidator
   );
 
@@ -143,6 +159,8 @@ const Canvas = ({
           mergeable:
             node.children.length === 0 || node.type === NodeTypes.choice,
           merging: merging,
+          deletable: nodeValidityMap[node.type].deletable,
+          copyable: nodeValidityMap[node.type].copyable,
           parents: [parent.id],
           userCanEdit,
           isChoiceChild: parent.type === NodeTypes.choice,
@@ -161,6 +179,8 @@ const Canvas = ({
         id: node.id,
         data: {
           ...node,
+          deletable: nodeValidityMap[node.type].deletable,
+          copyable: nodeValidityMap[node.type].copyable,
           parents: [],
           columnId: node.id,
           shapeHeight: shapeSize.height,
@@ -276,7 +296,7 @@ const Canvas = ({
     selectedNode && handleSetSelectedNode(selectedNode.id);
   }, [apiNodes, apiEdges, userCanEdit]);
 
-  useCenterCanvas();
+  const { centerCanvas } = useCenterCanvas();
 
   return (
     <>
@@ -301,12 +321,11 @@ const Canvas = ({
       />
       <ToBeToggle />
       <ResetProcessButton />
-      {selectedNode && (
+      {nodeToBeDeleted && (
         <DeleteNodeDialog
-          objectToDelete={selectedNode.data}
-          visible={visibleDeleteNodeScrim}
+          objectToDelete={nodeToBeDeleted.data}
           onClose={() => {
-            setVisibleDeleteNodeScrim(false);
+            setNodeToBeDeleted(undefined);
             setSelectedNode(undefined);
           }}
         />
@@ -335,7 +354,7 @@ const Canvas = ({
       )}
       <SideBar
         onClose={() => setSelectedNode(undefined)}
-        onDelete={() => setVisibleDeleteNodeScrim(true)}
+        onDelete={() => setNodeToBeDeleted(selectedNode)}
         canEdit={userCanEdit}
         selectedNode={selectedNode?.data}
       />
@@ -347,6 +366,7 @@ const Canvas = ({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onPaneClick={() => setSelectedNode(undefined)}
+        onMoveStart={() => closeContextMenu()}
         minZoom={0.2}
         nodesDraggable={userCanEdit}
         nodesConnectable={true}
@@ -356,20 +376,38 @@ const Canvas = ({
         onNodeDragStop={onNodeDragStop}
         elevateEdgesOnSelect={true}
         edgesFocusable={userCanEdit}
-        onNodeMouseEnter={(_, node) => setHoveredNode(node)}
-        onNodeMouseLeave={() => setHoveredNode(undefined)}
-        onEdgeMouseEnter={(event, edge) => handleSetSelectedEdge(edge)}
+        onNodeMouseEnter={(_, node) => {
+          !menuData && setHoveredNode(node);
+        }}
+        onNodeMouseLeave={() => {
+          !menuData && setHoveredNode(undefined);
+        }}
+        onEdgeMouseEnter={(_, edge) => handleSetSelectedEdge(edge)}
         onEdgeMouseLeave={() => handleSetSelectedEdge(undefined)}
         attributionPosition="bottom-right"
         connectionRadius={100}
         nodeDragThreshold={15}
+        onNodeContextMenu={onNodeContextMenu}
+        onPaneContextMenu={onPaneContextMenu}
+        ref={ref}
       >
         <MiniMapCustom />
         <Controls className={styles.controls} showInteractive={false}>
           <ControlButton className={styles.zoomContainer}>
             <ZoomLevel />
           </ControlButton>
         </Controls>
+        {menuData && (
+          <ContextMenu
+            menuData={menuData}
+            copyToClipBoard={copyToClipboard}
+            paste={paste}
+            centerCanvas={centerCanvas}
+            onDelete={(node) => setNodeToBeDeleted(node)}
+            onEditNode={(node) => setSelectedNode(node)}
+            canvasRef={ref}
+          />
+        )}
       </ReactFlow>
     </>
   );

components/canvas/ContextMenu.module.scss

@@ -0,0 +1,7 @@
+.menu {
+  position: absolute;
+}
+
+.menu > div {
+  padding: 0;
+}