chore: replace react contextmenu (#516)

* chore(explorer): replace react-contextmenu w eds

* refactor: remove ts-ignore

* refactor: create menuitem component

* chore: remove style copy script

packages/dm-core-plugins/package.json

@@ -12,7 +12,6 @@
     "highlight.js": "^11.8.0",
     "js-yaml": "^4.1.0",
     "mermaid": "^10.0.0",
-    "react-contextmenu": "^2.11.0",
     "react-hook-form": "^7.31.2",
     "react-toastify": "^9.1.3"
   },
@@ -48,8 +47,7 @@
   "scripts": {
     "prebuild": "shx rm -rf dist",
     "copy-yaml-css-file": "shx cp src/yaml/index.css ./dist/yaml",
-    "copy-explorer-css-file": "shx cp src/explorer/style.css ./dist/explorer",
-    "build": "tsc && yarn copy-explorer-css-file && yarn copy-yaml-css-file && yarn copy-explorer-css-file",
+    "build": "tsc && yarn copy-yaml-css-file",
     "test": "jest test",
     "test-watch": "jest test --watchAll"
   }

packages/dm-core-plugins/src/explorer/components/context-menu/ContextMenu.tsx

@@ -9,12 +9,10 @@ import {
   TreeNode,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button, Input, Label, Progress } from '@equinor/eds-core-react'
+import { Button, Input, Label, Menu, Progress } from '@equinor/eds-core-react'
 import { AxiosError } from 'axios'
 import React, { useState } from 'react'
-import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu'
 import { toast } from 'react-toastify'
-import './../../style.css'
 import {
   DeleteAction,
   NewFolderAction,
@@ -30,11 +28,13 @@ export const NodeRightClickMenu = (props: TNodeWrapperProps) => {
   const [scrimToShow, setScrimToShow] = useState<string>('')
   const [formData, setFormData] = useState<any>('')
   const [loading, setLoading] = useState<boolean>(false)
+  const [showMenu, setShowMenu] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   const STANDARD_DIALOG_WIDTH = '100%'
   const STANDARD_DIALOG_HEIGHT = '300px'
 
-  const menuItems = createContextMenuItems(node, dmssAPI, setScrimToShow)
+  const menuItems = createContextMenuItems(node, setScrimToShow)
 
   const handleFormDataSubmit = (
     node: TreeNode,
@@ -58,10 +58,25 @@ export const NodeRightClickMenu = (props: TNodeWrapperProps) => {
   //TODO when the tree changes by adding new package or deleting something, the tree should be updated to give consistent UI to user
   return (
     <div>
-      {/*@ts-ignore*/}
-      <ContextMenuTrigger id={node.nodeId}>{children}</ContextMenuTrigger>
-      {/*@ts-ignore*/}
-      <ContextMenu id={node.nodeId}>{menuItems}</ContextMenu>
+      <div
+        style={{ width: 'fit-content' }}
+        ref={setAnchorEl}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setShowMenu(!showMenu)
+        }}
+      >
+        {children}
+      </div>
+      <Menu
+        open={showMenu}
+        onClose={() => setShowMenu(false)}
+        anchorEl={anchorEl}
+        placement="bottom-start"
+        matchAnchorWidth={true}
+      >
+        {menuItems}
+      </Menu>
       <Dialog
         isDismissable
         open={scrimToShow === 'new-folder'}

packages/dm-core-plugins/src/explorer/components/context-menu/utils/createContextMenuItmes.tsx

@@ -1,96 +1,56 @@
-import { DmssAPI, EBlueprint, TreeNode } from '@development-framework/dm-core'
-import { MenuItem } from 'react-contextmenu'
+import { EBlueprint, TreeNode } from '@development-framework/dm-core'
+import { Menu } from '@equinor/eds-core-react'
 import React from 'react'
 
 export function createContextMenuItems(
   node: TreeNode,
-  dmssAPI: DmssAPI,
-  setShowScrimId: (id: string) => void
+  setScrimId: (id: string) => void
 ): JSX.Element[] {
   const menuItems = []
+  const MenuItem = (props: { id: string; text: string }) => {
+    return (
+      <Menu.Item key={props.id} onClick={() => setScrimId(props.id)}>
+        {props.text}
+      </Menu.Item>
+    )
+  }
 
   // dataSources get a "new root package"
   if (node.type === 'dataSource') {
-    menuItems.push(
-      // @ts-ignore
-      <MenuItem
-        key={'new-root-package'}
-        onClick={() => setShowScrimId('new-root-package')}
-      >
-        New package
-      </MenuItem>
-    )
+    menuItems.push(<MenuItem id="new-root-package" text="New package" />)
   }
 
   // Append to lists
   if (node.attribute.dimensions !== '') {
-    menuItems.push(
-      // @ts-ignore
-      <MenuItem
-        key={'append-entity'}
-        onClick={() => setShowScrimId('append-entity')}
-      >
-        Append {node.name}
-      </MenuItem>
-    )
+    menuItems.push(<MenuItem id="append-entity" text={`Append ${node.name}`} />)
   }
 
   // Packages get a "new folder"
   // and "new entity"
   // and "new blueprint"
   if (node.type == EBlueprint.PACKAGE) {
-    menuItems.push(
-      // @ts-ignore
-      <MenuItem key={'new-entity'} onClick={() => setShowScrimId('new-entity')}>
-        New entity
-      </MenuItem>
-    )
-    menuItems.push(
-      // @ts-ignore
-      <MenuItem
-        key={'new-blueprint'}
-        onClick={() => setShowScrimId('new-blueprint')}
-      >
-        New blueprint
-      </MenuItem>
-    )
-    menuItems.push(
-      // @ts-ignore
-      <MenuItem key={'new-folder'} onClick={() => setShowScrimId('new-folder')}>
-        New folder
-      </MenuItem>
-    )
+    menuItems.push(<MenuItem id="new-entity" text="New entity" />)
+    menuItems.push(<MenuItem id="new-blueprint" text="New blueprint" />)
+    menuItems.push(<MenuItem id="new-folder" text="New folder" />)
   }
 
   // Everything besides dataSources and folders can be viewed
   if (!['dataSource', EBlueprint.PACKAGE].includes(node.type)) {
     menuItems.push(
-      // @ts-ignore
-      <MenuItem
+      <Menu.Item
         key={'view'}
-        onClick={() => {
-          // @ts-ignore
-          window.open(`dmt/view/${node.nodeId}`, '_blank').focus()
-        }}
+        as="a"
+        href={`dmt/view/${node.nodeId}`}
+        target="_blank"
       >
         View in new tab
-      </MenuItem>
+      </Menu.Item>
     )
   }
 
   // Everything besides dataSources can be deleted
   if (node.type !== 'dataSource') {
-    menuItems.push(
-      //@ts-ignore
-      <MenuItem
-        key={'delete'}
-        onClick={() => {
-          setShowScrimId('delete')
-        }}
-      >
-        Delete
-      </MenuItem>
-    )
+    menuItems.push(<MenuItem id="delete" text="Delete" />)
   }
 
   return menuItems