feat(datamapper): Allow to delete usage of a datampping by hitting Delete key

Co-authored-by: Copilot <copilot@github.com>

Author: tplevko

packages/ui/src/components/View/SourceTargetView.tsx

@@ -4,6 +4,8 @@ import { Button, Split, SplitItem } from '@patternfly/react-core';
 import { SearchMinusIcon, SearchPlusIcon } from '@patternfly/react-icons';
 import { CSSProperties, FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
 
+import { useDataMapper } from '../../hooks/useDataMapper';
+import { useDataMapperDeleteHotkey } from '../../hooks/useDataMapperDeleteHotkey.hook';
 import { useMappingLinks } from '../../hooks/useMappingLinks';
 import { MappingLinksContainer } from './MappingLinkContainer';
 import { SourcePanel } from './SourcePanel';
@@ -17,9 +19,13 @@ export const SourceTargetView: FunctionComponent<SourceTargetViewProps> = ({
   uiScaleFactor: initialScaleFactor = 1,
 }) => {
   const { mappingLinkCanvasRef } = useMappingLinks();
+  const { refreshMappingTree } = useDataMapper();
   const containerRef = useRef<HTMLDivElement>(null);
   const [scaleFactor, setScaleFactor] = useState(initialScaleFactor);
 
+  // Enable Delete key support for removing selected mappings
+  useDataMapperDeleteHotkey(refreshMappingTree);
+
   const handleZoomIn = useCallback(() => {
     setScaleFactor((prev) => Math.min(prev + 0.1, 1.2)); // Max 1.2x zoom
   }, []);

packages/ui/src/hooks/useDataMapperDeleteHotkey.hook.test.tsx

@@ -0,0 +1,223 @@
+import { renderHook } from '@testing-library/react';
+import hotkeys from 'hotkeys-js';
+
+import { DocumentTree } from '../models/datamapper/document-tree';
+import { MappingActionKind } from '../models/datamapper/mapping-action';
+import { TargetDocumentNodeData } from '../models/datamapper/visualization';
+import { MappingActionService } from '../services/visualization/mapping-action.service';
+import { TreeUIService } from '../services/visualization/tree-ui.service';
+import { DocumentTreeState, useDocumentTreeStore } from '../store/document-tree.store';
+import { useDataMapper } from './useDataMapper';
+import { useDataMapperDeleteHotkey } from './useDataMapperDeleteHotkey.hook';
+
+// Mock dependencies
+jest.mock('hotkeys-js');
+jest.mock('./useDataMapper');
+jest.mock('../services/visualization/mapping-action.service');
+jest.mock('../services/visualization/tree-ui.service');
+
+describe('useDataMapperDeleteHotkey', () => {
+  let mockOnUpdate: jest.Mock;
+  let mockClearSelection: jest.Mock;
+  let mockHotkeys: jest.MockedFunction<typeof hotkeys>;
+  let mockHotkeysUnbind: jest.Mock;
+  let mockUseDataMapper: jest.MockedFunction<typeof useDataMapper>;
+  let mockGetAllowedActions: jest.Mock;
+  let mockDeleteMappingItem: jest.Mock;
+  let mockCreateTree: jest.Mock;
+  let mockFindNodeByPath: jest.Mock;
+  let mockTargetBodyDocument: { id: string };
+  let mockMappingTree: { mappings: unknown[] };
+  let mockTreeNode: { nodeData: TargetDocumentNodeData };
+  let mockTargetDocumentNodeData: TargetDocumentNodeData;
+
+  beforeEach(() => {
+    // Reset all mocks
+    jest.clearAllMocks();
+
+    // Setup basic mocks
+    mockOnUpdate = jest.fn();
+    mockClearSelection = jest.fn();
+    mockHotkeysUnbind = jest.fn();
+    mockGetAllowedActions = jest.fn();
+    mockDeleteMappingItem = jest.fn();
+    mockCreateTree = jest.fn();
+    mockFindNodeByPath = jest.fn();
+
+    // Mock hotkeys
+    mockHotkeys = hotkeys as jest.MockedFunction<typeof hotkeys>;
+    mockHotkeys.unbind = mockHotkeysUnbind;
+
+    // Mock useDataMapper
+    mockTargetBodyDocument = { id: 'target-doc' };
+    mockMappingTree = { mappings: [] };
+    mockUseDataMapper = useDataMapper as jest.MockedFunction<typeof useDataMapper>;
+    mockUseDataMapper.mockReturnValue({
+      targetBodyDocument: mockTargetBodyDocument,
+      mappingTree: mockMappingTree,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any);
+
+    // Mock MappingActionService
+    (MappingActionService.getAllowedActions as jest.Mock) = mockGetAllowedActions;
+    (MappingActionService.deleteMappingItem as jest.Mock) = mockDeleteMappingItem;
+
+    // Mock TreeUIService
+    (TreeUIService.createTree as jest.Mock) = mockCreateTree;
+
+    // Setup mock node data
+    mockTargetDocumentNodeData = { id: 'test-node' } as TargetDocumentNodeData;
+    mockTreeNode = {
+      nodeData: mockTargetDocumentNodeData,
+    };
+
+    mockFindNodeByPath = jest.fn();
+    mockCreateTree.mockReturnValue({
+      findNodeByPath: mockFindNodeByPath,
+    } as unknown as DocumentTree);
+
+    // Setup default store state
+    useDocumentTreeStore.setState({
+      selectedNodePath: null,
+      selectedNodeIsSource: false,
+      clearSelection: mockClearSelection,
+    } as Partial<DocumentTreeState>);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('successful deletion', () => {
+    beforeEach(() => {
+      useDocumentTreeStore.setState({
+        selectedNodePath: 'test-path',
+        selectedNodeIsSource: false,
+        clearSelection: mockClearSelection,
+      } as Partial<DocumentTreeState>);
+
+      mockFindNodeByPath.mockReturnValue(mockTreeNode);
+      mockGetAllowedActions.mockReturnValue([MappingActionKind.Delete]);
+    });
+
+    it('should delete mapping when valid target node is selected and Delete is allowed', () => {
+      renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+      const hotkeyCallback = mockHotkeys.mock.calls[0][1] as (event: KeyboardEvent) => void;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as KeyboardEvent;
+
+      hotkeyCallback(mockEvent);
+
+      expect(mockDeleteMappingItem).toHaveBeenCalledWith(mockTargetDocumentNodeData);
+    });
+
+    it('should clear selection after deletion', () => {
+      renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+      const hotkeyCallback = mockHotkeys.mock.calls[0][1] as (event: KeyboardEvent) => void;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as KeyboardEvent;
+
+      hotkeyCallback(mockEvent);
+
+      expect(mockClearSelection).toHaveBeenCalled();
+    });
+
+    it('should call onUpdate callback after deletion', () => {
+      renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+      const hotkeyCallback = mockHotkeys.mock.calls[0][1] as (event: KeyboardEvent) => void;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as KeyboardEvent;
+
+      hotkeyCallback(mockEvent);
+
+      expect(mockOnUpdate).toHaveBeenCalled();
+    });
+  });
+
+  describe('deletion blocked scenarios', () => {
+    it('should not delete when no node is selected', () => {
+      useDocumentTreeStore.setState({
+        selectedNodePath: null,
+        selectedNodeIsSource: false,
+        clearSelection: mockClearSelection,
+      } as Partial<DocumentTreeState>);
+
+      renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+      const hotkeyCallback = mockHotkeys.mock.calls[0][1] as (event: KeyboardEvent) => void;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as KeyboardEvent;
+
+      hotkeyCallback(mockEvent);
+
+      expect(mockDeleteMappingItem).not.toHaveBeenCalled();
+      expect(mockClearSelection).not.toHaveBeenCalled();
+      expect(mockOnUpdate).not.toHaveBeenCalled();
+    });
+
+    it('should not delete when Delete action is not allowed', () => {
+      useDocumentTreeStore.setState({
+        selectedNodePath: 'test-path',
+        selectedNodeIsSource: false,
+        clearSelection: mockClearSelection,
+      } as Partial<DocumentTreeState>);
+
+      mockFindNodeByPath.mockReturnValue(mockTreeNode);
+      mockGetAllowedActions.mockReturnValue([MappingActionKind.If, MappingActionKind.Choose]);
+
+      renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+      const hotkeyCallback = mockHotkeys.mock.calls[0][1] as (event: KeyboardEvent) => void;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as KeyboardEvent;
+
+      hotkeyCallback(mockEvent);
+
+      expect(mockDeleteMappingItem).not.toHaveBeenCalled();
+      expect(mockClearSelection).not.toHaveBeenCalled();
+      expect(mockOnUpdate).not.toHaveBeenCalled();
+    });
+
+    describe('tree creation and memoization', () => {
+      it('should create TargetDocumentNodeData with correct parameters', () => {
+        renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+        // The hook creates a TargetDocumentNodeData internally
+        // We can verify TreeUIService.createTree was called
+        expect(mockCreateTree).toHaveBeenCalled();
+      });
+
+      it('should recreate tree when targetBodyDocument changes', () => {
+        const { rerender } = renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+        const callCountBefore = mockCreateTree.mock.calls.length;
+
+        // Change targetBodyDocument
+        mockUseDataMapper.mockReturnValue({
+          targetBodyDocument: { id: 'new-target-doc' },
+          mappingTree: mockMappingTree,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any);
+
+        rerender();
+
+        expect(mockCreateTree.mock.calls.length).toBeGreaterThan(callCountBefore);
+      });
+
+      it('should recreate tree when mappingTree changes', () => {
+        const { rerender } = renderHook(() => useDataMapperDeleteHotkey(mockOnUpdate));
+
+        const callCountBefore = mockCreateTree.mock.calls.length;
+
+        // Change mappingTree
+        mockUseDataMapper.mockReturnValue({
+          targetBodyDocument: mockTargetBodyDocument,
+          mappingTree: { mappings: [{ id: 'new-mapping' }] },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any);
+
+        rerender();
+
+        expect(mockCreateTree.mock.calls.length).toBeGreaterThan(callCountBefore);
+      });
+    });
+  });
+});

packages/ui/src/hooks/useDataMapperDeleteHotkey.hook.tsx

@@ -0,0 +1,76 @@
+import hotkeys from 'hotkeys-js';
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { DocumentTree } from '../models/datamapper/document-tree';
+import { MappingActionKind } from '../models/datamapper/mapping-action';
+import { TargetDocumentNodeData } from '../models/datamapper/visualization';
+import { MappingActionService } from '../services/visualization/mapping-action.service';
+import { TreeUIService } from '../services/visualization/tree-ui.service';
+import { useDocumentTreeStore } from '../store/document-tree.store';
+import { useDataMapper } from './useDataMapper';
+
+/**
+ * Hook that enables Delete/Backspace hotkey support for removing selected mappings
+ * in the DataMapper. When a target node with a mapping is selected and the user
+ * presses Delete or Backspace, the mapping is removed and the selection is cleared.
+ *
+ * @param onUpdate - Callback to trigger a re-render after deletion
+ */
+export function useDataMapperDeleteHotkey(onUpdate: () => void) {
+  const selectedNodePath = useDocumentTreeStore((state) => state.selectedNodePath);
+  const selectedNodeIsSource = useDocumentTreeStore((state) => state.selectedNodeIsSource);
+  const clearSelection = useDocumentTreeStore((state) => state.clearSelection);
+  const { targetBodyDocument, mappingTree } = useDataMapper();
+
+  // Create the target document tree
+  const targetBodyNodeData = useMemo(
+    () => new TargetDocumentNodeData(targetBodyDocument, mappingTree),
+    [targetBodyDocument, mappingTree],
+  );
+
+  const targetBodyTree = useMemo<DocumentTree | undefined>(() => {
+    return TreeUIService.createTree(targetBodyNodeData);
+  }, [targetBodyNodeData]);
+
+  const handleKeyDown = useCallback(() => {
+    // Only handle deletions on target nodes (not source nodes)
+    if (!selectedNodePath || selectedNodeIsSource || !targetBodyTree) return;
+
+    // Find the selected tree node by path
+    const treeNode = targetBodyTree.findNodeByPath(selectedNodePath);
+    if (!treeNode) return;
+
+    // Get the node data from the tree node
+    const selectedNode = treeNode.nodeData as TargetDocumentNodeData;
+    if (!selectedNode) return;
+
+    // Check if deletion is allowed for this node
+    const allowedActions = new Set(MappingActionService.getAllowedActions(selectedNode));
+    if (!allowedActions.has(MappingActionKind.Delete)) return;
+
+    // Delete the mapping
+    MappingActionService.deleteMappingItem(selectedNode);
+
+    // Clear selection and trigger update
+    clearSelection();
+    onUpdate();
+  }, [selectedNodePath, selectedNodeIsSource, targetBodyTree, clearSelection, onUpdate]);
+
+  useEffect(() => {
+    hotkeys.filter = (event) => {
+      const target = event.target as HTMLElement;
+      const tagName = target.tagName;
+      // Allow hotkey unless user is typing in an input field
+      return !(tagName === 'INPUT' || tagName === 'TEXTAREA' || target.isContentEditable);
+    };
+
+    hotkeys('Delete, backspace', (event) => {
+      event.preventDefault();
+      handleKeyDown();
+    });
+
+    return () => {
+      hotkeys.unbind('Delete, backspace');
+    };
+  }, [handleKeyDown]);
+}