Fix(Data Mapper): Disabling context menu as it causes app to crash (#…

…4821) * temporarily disabling context menu * removing context menu from all of Data Mapper
Azure · May 10, 2024 · 6b21a68 · 6b21a68
1 parent ff669ad
commit 6b21a68
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 48 deletions.
diff --git a/libs/data-mapper/src/lib/components/edge/ConnectionEdge.tsx b/libs/data-mapper/src/lib/components/edge/ConnectionEdge.tsx
@@ -1,9 +1,4 @@
-import {
-  deleteCurrentlySelectedItem,
-  setCanvasToolboxTabToDisplay,
-  setInlineFunctionInputOutputKeys,
-  setSelectedItem,
-} from '../../core/state/DataMapSlice';
+import { setCanvasToolboxTabToDisplay, setInlineFunctionInputOutputKeys } from '../../core/state/DataMapSlice';
 import type { AppDispatch, RootState } from '../../core/state/Store';
 import { getSmoothStepEdge } from '../../utils/Edge.Utils';
 import {
@@ -16,8 +11,7 @@ import {
 import { ToolboxPanelTabs } from '../canvasToolbox/CanvasToolbox';
 import { Button, Tooltip, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { Add20Filled } from '@fluentui/react-icons';
-import { CardContextMenu, useCardContextMenu } from '@microsoft/designer-ui';
-import { DeleteMenuItem } from '@microsoft/logic-apps-designer';
+import { useCardContextMenu } from '@microsoft/designer-ui';
 import type React from 'react';
 import { useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -157,11 +151,6 @@ export const ConnectionEdge = (props: EdgeProps) => {
 
   const contextMenu = useCardContextMenu();
 
-  const handleDeleteClick = () => {
-    dispatch(setSelectedItem(id));
-    dispatch(deleteCurrentlySelectedItem());
-  };
-
   return (
     <svg onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onContextMenu={contextMenu.handle}>
       <BaseEdge
@@ -206,13 +195,6 @@ export const ConnectionEdge = (props: EdgeProps) => {
           </Tooltip>
         ) : null}
       </foreignObject>
-      <CardContextMenu
-        title={'Delete'}
-        contextMenuLocation={contextMenu.location}
-        menuItems={[<DeleteMenuItem key="delete" onClick={handleDeleteClick} />]}
-        open={contextMenu.isShowing}
-        setOpen={contextMenu.setIsShowing}
-      />
     </svg>
   );
 };
diff --git a/libs/data-mapper/src/lib/components/nodeCard/functionCard/ExpandedFunctionCard.tsx b/libs/data-mapper/src/lib/components/nodeCard/functionCard/ExpandedFunctionCard.tsx
@@ -1,6 +1,6 @@
 import { expandedFunctionCardMaxWidth } from '../../../constants/NodeConstants';
 import { customTokens } from '../../../core';
-import { deleteCurrentlySelectedItem, setSelectedItem } from '../../../core/state/DataMapSlice';
+// import { deleteCurrentlySelectedItem, setSelectedItem } from '../../../core/state/DataMapSlice';
 import type { RootState } from '../../../core/state/Store';
 import { generateInputHandleId } from '../../../utils/Connection.Utils';
 import { hasOnlyCustomInputType } from '../../../utils/Function.Utils';
@@ -13,18 +13,17 @@ import { inputsValid, useFunctionCardStyles } from './FunctionCard';
 import { Stack, StackItem } from '@fluentui/react';
 import { Button, Divider, PresenceBadge, Text, Tooltip, mergeClasses, tokens } from '@fluentui/react-components';
 import { useBoolean } from '@fluentui/react-hooks';
-import { CardContextMenu, useCardContextMenu } from '@microsoft/designer-ui';
-import { DeleteMenuItem } from '@microsoft/logic-apps-designer';
+import { useCardContextMenu } from '@microsoft/designer-ui';
+//import { DeleteMenuItem } from '@microsoft/logic-apps-designer';
 import { useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import type { NodeProps } from 'reactflow';
 import { Handle, Position } from 'reactflow';
 
 export const ExpandedFunctionCard = (props: NodeProps<FunctionCardProps>) => {
   const { functionData, functionBranding, dataTestId } = props.data;
   const reactFlowId = props.id;
 
-  const dispatch = useDispatch();
   const classes = useFunctionCardStyles();
 
   const selectedItemKey = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.selectedItemKey);
@@ -45,10 +44,10 @@ export const ExpandedFunctionCard = (props: NodeProps<FunctionCardProps>) => {
 
   const contextMenu = useCardContextMenu();
 
-  const handleDeleteClick = () => {
-    dispatch(setSelectedItem(reactFlowId));
-    dispatch(deleteCurrentlySelectedItem());
-  };
+  // const handleDeleteClick = () => {
+  //   dispatch(setSelectedItem(reactFlowId));
+  //   dispatch(deleteCurrentlySelectedItem());
+  // };
 
   const handleHeaderOnClick = () => {
     // Require a function to already be selected to be able to collapse
@@ -226,13 +225,13 @@ export const ExpandedFunctionCard = (props: NodeProps<FunctionCardProps>) => {
         ) : null}
       </div>
 
-      <CardContextMenu
+      {/* <CardContextMenu
         title={'Delete'}
         contextMenuLocation={contextMenu.location}
         menuItems={[<DeleteMenuItem key="delete" onClick={handleDeleteClick} />]}
         open={contextMenu.isShowing}
         setOpen={contextMenu.setIsShowing}
-      />
+      /> */}
     </div>
   );
 };

diff --git a/libs/data-mapper/src/lib/components/nodeCard/functionCard/SimpleFunctionCard.tsx b/libs/data-mapper/src/lib/components/nodeCard/functionCard/SimpleFunctionCard.tsx
@@ -1,6 +1,5 @@
 import { ReactFlowNodeType } from '../../../constants/ReactFlowConstants';
 import { customTokens } from '../../../core';
-import { deleteCurrentlySelectedItem, setSelectedItem } from '../../../core/state/DataMapSlice';
 import type { RootState } from '../../../core/state/Store';
 import { isNodeHighlighted } from '../../../utils/ReactFlow.Util';
 import { FunctionIcon } from '../../functionIcon/FunctionIcon';
@@ -9,18 +8,16 @@ import { errorCardStyles, getStylesForSharedState, highlightedCardStyles, select
 import type { FunctionCardProps } from './FunctionCard';
 import { inputsValid, shouldDisplaySourceHandle, shouldDisplayTargetHandle, useFunctionCardStyles } from './FunctionCard';
 import { Button, PresenceBadge, Text, Tooltip, mergeClasses, tokens } from '@fluentui/react-components';
-import { CardContextMenu, useCardContextMenu } from '@microsoft/designer-ui';
-import { DeleteMenuItem } from '@microsoft/logic-apps-designer';
+import { useCardContextMenu } from '@microsoft/designer-ui';
 import { useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import type { NodeProps } from 'reactflow';
 import { Position } from 'reactflow';
 
 export const SimpleFunctionCard = (props: NodeProps<FunctionCardProps>) => {
   const { functionData, disabled, functionBranding, displayHandle, onClick, dataTestId } = props.data;
   const reactFlowId = props.id;
 
-  const dispatch = useDispatch();
   const classes = useFunctionCardStyles();
   const mergedClasses = mergeClasses(getStylesForSharedState().root, classes.root);
 
@@ -42,11 +39,6 @@ export const SimpleFunctionCard = (props: NodeProps<FunctionCardProps>) => {
 
   const contextMenu = useCardContextMenu();
 
-  const handleDeleteClick = () => {
-    dispatch(setSelectedItem(reactFlowId));
-    dispatch(deleteCurrentlySelectedItem());
-  };
-
   const displayTargetHandle = shouldDisplayTargetHandle(displayHandle, sourceNodeConnectionBeingDrawnFromId, reactFlowId, functionData);
   const displaySourceHandle = shouldDisplaySourceHandle(
     displayHandle,
@@ -123,13 +115,6 @@ export const SimpleFunctionCard = (props: NodeProps<FunctionCardProps>) => {
         nodeReactFlowType={ReactFlowNodeType.FunctionNode}
         nodeReactFlowId={reactFlowId}
       />
-      <CardContextMenu
-        title={'Delete'}
-        contextMenuLocation={contextMenu.location}
-        menuItems={[<DeleteMenuItem key="delete" onClick={handleDeleteClick} />]}
-        open={contextMenu.isShowing}
-        setOpen={contextMenu.setIsShowing}
-      />
     </div>
   );
 };