feat(designer): Moved edge context menu to one shared component (#5321)

* Moved edge context menu to one shared component

* Fixed slice issue

* Added context menu e2e tests

* Fixed paste conflict issue

* Fixed custom menu tests

Author: rllyy97

Localize/lang/strings.json

@@ -644,7 +644,6 @@
   "MfAdfx": "Edit in advanced mode",
   "MirIsS": "Show code",
   "MmBfD1": "Unexpected error",
-  "MmldTM": "No action to paste",
   "MnThTq": "Insert function",
   "MwMpAh": "Return to expression editor",
   "N0pS6Y": "Target schema",
@@ -1640,7 +1639,6 @@
   "_MfAdfx.comment": "Button Label when clicked to swith to advanced editor",
   "_MirIsS.comment": "Button to display the code view",
   "_MmBfD1.comment": "This is the default message shown in case of an error. It can be shown in multiple contexts but generally would be a notification",
-  "_MmldTM.comment": "Text for tooltip when there is no action to paste",
   "_MnThTq.comment": "Message to insert function",
   "_MwMpAh.comment": "Text of Tooltip to return to expression editor",
   "_N0pS6Y.comment": "Target schema",

e2e/designer/contextMenus.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
+
+test.describe(
+  'ContextMenu Tests',
+  {
+    tag: '@mock',
+  },
+  () => {
+    test('Should open node context menus', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'Scope');
+
+      // Open trigger context menu
+      await page.getByText('manual', { exact: true }).click({ button: 'right' });
+      expect(await page.getByText('Copy trigger', { exact: true }).isVisible()).toBeTruthy();
+      await page.keyboard.press('Escape');
+      // Open variable context menu
+      await page.getByText('Initialize variable', { exact: true }).click({ button: 'right' });
+      expect(await page.getByText('Copy action', { exact: true }).isVisible()).toBeTruthy();
+      await page.keyboard.press('Escape');
+      // Open scope context menu
+      await page.getByLabel('Scope operation', { exact: true }).click({ button: 'right' });
+      expect(await page.getByText('Copy entire action', { exact: true }).isVisible()).toBeTruthy();
+      await page.keyboard.press('Escape');
+    });
+
+    test('Should open edge context menus', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'Scope');
+
+      // Click first edge button
+      await page.getByLabel('Insert a new step between manual and Initialize variable').click();
+      expect(await page.getByText('Add an action', { exact: true }).isVisible()).toBeTruthy();
+      expect(await page.getByText('Add a parallel branch', { exact: true }).isVisible()).toBeTruthy();
+      await page.keyboard.press('Escape');
+
+      // Click the last edge button
+      await page.getByLabel('Insert a new step after Response').click();
+      expect(await page.getByText('Add an action', { exact: true }).isVisible()).toBeTruthy();
+      expect(await page.getByText('Add a parallel branch', { exact: true }).isVisible()).not.toBeTruthy();
+      await page.keyboard.press('Escape');
+    });
+  }
+);

libs/designer/src/lib/core/state/designerView/designerViewInterfaces.ts

@@ -2,10 +2,19 @@ export interface DesignerViewState {
   showMinimap?: boolean;
   clampPan?: boolean;
   showDeleteModalNodeId?: string;
-  nodeContextMenuData?: ContextMenuObject;
+  nodeContextMenuData?: NodeContextMenuObject;
+  edgeContextMenuData?: EdgeContextMenuObject;
 }
 
-export interface ContextMenuObject {
+export interface NodeContextMenuObject {
   nodeId: string;
   location: { x: number; y: number };
 }
+
+export interface EdgeContextMenuObject {
+  graphId: string;
+  parentId?: string;
+  childId?: string;
+  isLeaf?: boolean;
+  location: { x: number; y: number };
+}

libs/designer/src/lib/core/state/designerView/designerViewSelectors.ts

@@ -16,3 +16,7 @@ export const useShowDeleteModalNodeId = () => {
 export const useNodeContextMenuData = () => {
   return useSelector((state: RootState) => state.designerView.nodeContextMenuData);
 };
+
+export const useEdgeContextMenuData = () => {
+  return useSelector((state: RootState) => state.designerView.edgeContextMenuData);
+};

libs/designer/src/lib/core/state/designerView/designerViewSlice.ts

@@ -1,5 +1,5 @@
 import { resetWorkflowState } from '../global';
-import type { ContextMenuObject, DesignerViewState } from './designerViewInterfaces';
+import type { NodeContextMenuObject, EdgeContextMenuObject, DesignerViewState } from './designerViewInterfaces';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
@@ -8,30 +8,35 @@ const initialState: DesignerViewState = {
   clampPan: true,
   showDeleteModalNodeId: undefined,
   nodeContextMenuData: undefined,
+  edgeContextMenuData: undefined,
 };
 
 export const designerViewSlice = createSlice({
   name: 'designerView',
   initialState,
   reducers: {
-    toggleMinimap: (state: DesignerViewState) => {
+    toggleMinimap: (state) => {
       state.showMinimap = !state.showMinimap;
     },
-    toggleClampPan: (state: DesignerViewState) => {
+    toggleClampPan: (state) => {
       state.clampPan = !state.clampPan;
     },
-    setShowDeleteModalNodeId: (state: DesignerViewState, action: PayloadAction<string | undefined>) => {
+    setShowDeleteModalNodeId: (state, action: PayloadAction<string | undefined>) => {
       state.showDeleteModalNodeId = action.payload;
     },
-    setNodeContextMenuData: (state: DesignerViewState, action: PayloadAction<ContextMenuObject>) => {
+    setNodeContextMenuData: (state, action: PayloadAction<NodeContextMenuObject>) => {
       state.nodeContextMenuData = action.payload;
     },
+    setEdgeContextMenuData: (state, action: PayloadAction<EdgeContextMenuObject>) => {
+      state.edgeContextMenuData = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(resetWorkflowState, () => initialState);
   },
 });
 
-export const { toggleMinimap, toggleClampPan, setShowDeleteModalNodeId, setNodeContextMenuData } = designerViewSlice.actions;
+export const { toggleMinimap, toggleClampPan, setShowDeleteModalNodeId, setNodeContextMenuData, setEdgeContextMenuData } =
+  designerViewSlice.actions;
 
 export default designerViewSlice.reducer;

libs/designer/src/lib/ui/Designer.tsx

@@ -38,6 +38,7 @@ import type { BackgroundProps, EdgeTypes, NodeChange } from '@xyflow/react';
 import { PerformanceDebugTool } from './common/PerformanceDebug/PerformanceDebug';
 import { CanvasFinder } from './CanvasFinder';
 import { DesignerContextualMenu } from './common/DesignerContextualMenu/DesignerContextualMenu';
+import { EdgeContextualMenu } from './common/EdgeContextualMenu/EdgeContextualMenu';
 
 export interface DesignerProps {
   backgroundProps?: BackgroundProps;
@@ -242,6 +243,7 @@ export const Designer = (props: DesignerProps) => {
             {backgroundProps ? <Background {...backgroundProps} /> : null}
             <DeleteModal />
             <DesignerContextualMenu />
+            <EdgeContextualMenu />
           </ReactFlow>
           <div className={css('msla-designer-tools', panelLocation === PanelLocation.Left && 'left-panel')} style={copilotPadding}>
             <Controls />

libs/designer/src/lib/ui/common/DesignerContextualMenu/CopyTooltip.tsx

@@ -11,7 +11,7 @@ export interface CopyTooltipProps {
 }
 
 export const CopyTooltip = ({ targetRef: ref, location, hideTooltip }: CopyTooltipProps) => {
-  useOnViewportChange({ onStart: hideTooltip });
+  useOnViewportChange({ onStart: () => hideTooltip() });
 
   const intl = useIntl();
   const copiedText = intl.formatMessage({

libs/designer/src/lib/ui/common/DesignerContextualMenu/DesignerContextualMenu.tsx

@@ -22,8 +22,8 @@ import {
 } from '../../../core/state/designerOptions/designerOptionsSelectors';
 import { copyOperation, copyScopeOperation } from '../../../core/actions/bjsworkflow/copypaste';
 import { CopyTooltip } from './CopyTooltip';
-import { CustomMenu } from '../../connections/customMenu';
-import { NodeMenuPriorities } from '../../CustomNodes/Priorities';
+import { CustomMenu } from '../EdgeContextualMenu/customMenu';
+import { NodeMenuPriorities } from './Priorities';
 import type { DropdownMenuCustomNode } from '@microsoft/logic-apps-shared/src/utils/src/lib/models/dropdownMenuCustomNode';
 
 export const DesignerContextualMenu = () => {