Merge pull request #403

feat(19255): Add safeguards for deleting nodes or edges on the Designer

* feat(19255): add read-only status

* refactor(19255): remove default delete support

* refactor(19255): add custom listener for deletion

* feat(19255): add checks for node/edge deletion

* refactor(19255): add delete hot keys

* feat(19255): add handling for deletion of elements on the Designer

* feat(19255): update translations

* chore(19255): update dependencies

* test(19255): add tests

* fix(19255): fix mock

* test(19255): fix translations and test

* chore(19255): add quiet to cypress percy testing

* chore(19255): add cypress real event

* test(19255): fix test

* test(19255): fix test

* chore(19255): a bit of cleaning

Author: vanch3d

.github/workflows/frontend-visual.yml

@@ -44,12 +44,14 @@ jobs:
       - name: 🧪 Run Cypress E2E
         uses: cypress-io/github-action@v6
         with:
+          quiet: true
           working-directory: ./hivemq-edge/src/frontend/
           start: pnpm dev
 
       - name: 🧪 Run Cypress Component
         uses: cypress-io/github-action@v6
         with:
+          quiet: true
           working-directory: ./hivemq-edge/src/frontend/
           component: true
           start: pnpm dev

hivemq-edge/src/frontend/cypress/support/component.tsx

@@ -19,6 +19,7 @@ import './workaround-cypress-10-0-2-process-issue.ts'
 import 'cypress-axe'
 import 'cypress-each'
 import '@percy/cypress'
+import 'cypress-real-events'
 import './commands'
 
 import { mount, MountOptions, MountReturn } from 'cypress/react18'

hivemq-edge/src/frontend/cypress/support/e2e.ts

@@ -16,6 +16,7 @@
 import 'cypress-axe'
 import 'cypress-each'
 import '@percy/cypress'
+import 'cypress-real-events'
 
 import './commands'
 

hivemq-edge/src/frontend/package.json

@@ -27,15 +27,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "^2.1.1",
-    "@chakra-ui/icons": "^2.0.19",
-    "@chakra-ui/radio": "^2.0.22",
-    "@chakra-ui/react": "^2.7.1",
-    "@chakra-ui/skip-nav": "^2.0.15",
+    "@chakra-ui/anatomy": "^2.2.2",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/radio": "^2.1.2",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/skip-nav": "^2.1.0",
     "@chakra-ui/utils": "^2.0.14",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.3",
+    "@fontsource/roboto": "^5.0.13",
     "@monaco-editor/react": "^4.5.1",
     "@nivo/bar": "^0.84.0",
     "@nivo/core": "^0.84.0",
@@ -62,6 +62,7 @@
     "axios": "^1.6.8",
     "chakra-react-select": "^4.7.6",
     "csstype": "^3.1.2",
+    "cypress-real-events": "^1.12.0",
     "d3-array": "^3.2.4",
     "d3-hierarchy": "^3.1.2",
     "elkjs": "^0.9.1",

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -35,10 +35,11 @@ const ConfirmationDialog: FC<ConfirmationDialogProps> = ({ isOpen, onClose, head
           <AlertDialogBody>{message}</AlertDialogBody>
 
           <AlertDialogFooter>
-            <Button ref={cancelRef as LegacyRef<HTMLButtonElement>} onClick={onClose}>
+            <Button ref={cancelRef as LegacyRef<HTMLButtonElement>} onClick={onClose} data-testid="confirmation-cancel">
               {t('action.cancel')}
             </Button>
             <Button
+              data-testid="confirmation-submit"
               onClick={() => {
                 onClose()
                 onSubmit?.()

hivemq-edge/src/frontend/src/components/Modal/ConfirmationDialog.tsx

@@ -38,7 +38,8 @@ export const MockStoreWrapper: FC<MockStoreWrapperProps> = ({ config, children }
           type: 'add',
         }))
       )
-  }, [config, onAddEdges, onAddNodes])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return <>{children}</>
 }

hivemq-edge/src/frontend/src/extensions/datahub/__test-utils__/MockStoreWrapper.tsx

@@ -0,0 +1,135 @@
+/// <reference types="cypress" />
+
+import { Edge, Node } from 'reactflow'
+import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
+import { MockStoreWrapper } from '@datahub/__test-utils__/MockStoreWrapper.tsx'
+import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+
+import DeleteListener from '@datahub/components/controls/DeleteListener.tsx'
+
+const getWrapperWith = (initNodes: Node[], initEdges?: Edge[]) => {
+  const Wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = ({ children }) => {
+    const { nodes, edges } = useDataHubDraftStore()
+    return (
+      <MockStoreWrapper
+        config={{
+          initialState: {
+            nodes: initNodes,
+            edges: initEdges,
+          },
+        }}
+      >
+        {children}
+        <TableContainer>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th></Th>
+                <Th>count</Th>
+                <Th>selected</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <Tr>
+                <Th>nodes</Th>
+                <Td>{nodes.length}</Td>
+                <Td>{nodes.filter((e) => e.selected).length}</Td>
+              </Tr>
+              <Tr>
+                <Th>edges</Th>
+                <Td>{edges.length}</Td>
+                <Td>{edges.filter((e) => e.selected).length}</Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </MockStoreWrapper>
+    )
+  }
+
+  return Wrapper
+}
+
+describe('DeleteListener', () => {
+  beforeEach(() => {
+    cy.viewport(800, 400)
+  })
+
+  it('should render a confirmation modal when deleting', () => {
+    cy.mountWithProviders(<DeleteListener />, {
+      wrapper: getWrapperWith(
+        [
+          {
+            id: '1',
+            position: { x: 0, y: 0 },
+            data: undefined,
+            selected: true,
+          },
+        ],
+        []
+      ),
+    })
+
+    cy.get("[role='alertdialog']").should('not.exist')
+    cy.get('body').type('{backspace}')
+    cy.get("[role='alertdialog']")
+      .should('be.visible')
+      .should('contain.text', 'Are you sure you want to delete 1 node? The operation cannot be reversed.')
+    cy.getByTestId('confirmation-submit').click()
+    cy.get("[role='alertdialog']").should('not.exist')
+  })
+
+  it('should render a confirmation modal when deleting multiple elements', () => {
+    cy.mountWithProviders(<DeleteListener />, {
+      wrapper: getWrapperWith(
+        [
+          {
+            id: '1',
+            position: { x: 0, y: 0 },
+            data: undefined,
+            selected: true,
+          },
+          {
+            id: '2',
+            position: { x: 0, y: 0 },
+            data: undefined,
+            selected: false,
+          },
+          {
+            id: '3',
+            position: { x: 0, y: 0 },
+            data: undefined,
+            selected: true,
+          },
+        ],
+        [{ id: 'e1', source: '1', target: '3', selected: true }]
+      ),
+    })
+
+    cy.get('td').then((w) => {
+      cy.wrap(w[0]).should('contain.text', 3)
+      cy.wrap(w[1]).should('contain.text', 2)
+      cy.wrap(w[2]).should('contain.text', 1)
+      cy.wrap(w[3]).should('contain.text', 1)
+    })
+
+    cy.get("[role='alertdialog']").should('not.exist')
+    cy.get('body').type('{backspace}')
+    cy.get("[role='alertdialog']").as('confirm')
+
+    cy.get('@confirm')
+      .should('be.visible')
+      .should(
+        'contain.text',
+        'Are you sure you want to delete 3 nodes and connections? The operation cannot be reversed.'
+      )
+    cy.getByTestId('confirmation-submit').click()
+    cy.get("[role='alertdialog']").should('not.exist')
+    cy.get('td').then((w) => {
+      cy.wrap(w[0]).should('contain.text', 1)
+      cy.wrap(w[1]).should('contain.text', 0)
+      cy.wrap(w[2]).should('contain.text', 0)
+      cy.wrap(w[3]).should('contain.text', 0)
+    })
+  })
+})

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/DeleteListener.spec.cy.tsx

@@ -0,0 +1,96 @@
+import { FC, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { NodeRemoveChange, EdgeRemoveChange } from 'reactflow'
+import { ListItem, Text, UnorderedList, useDisclosure, useToast, VStack } from '@chakra-ui/react'
+
+import ConfirmationDialog from '@/components/Modal/ConfirmationDialog.tsx'
+
+import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+import { DesignerStatus } from '@datahub/types.ts'
+import { DATAHUB_HOTKEY } from '@datahub/utils/datahub.utils.ts'
+import { canDeleteEdge, canDeleteNode } from '@datahub/utils/node.utils.ts'
+import { DATAHUB_TOAST_ID, dataHubToastOption } from '@datahub/utils/toast.utils.ts'
+
+const DeleteListener: FC = () => {
+  const { t } = useTranslation('datahub')
+  const { nodes, edges, status, onNodesChange, onEdgesChange, setStatus } = useDataHubDraftStore()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const toast = useToast()
+
+  const selectedElements = useMemo(() => {
+    const selectedNodes = nodes.filter((node) => node.selected)
+    const selectedEdges = edges.filter((edge) => edge.selected)
+    return { selectedNodes, selectedEdges }
+  }, [edges, nodes])
+
+  const SelectedElementsCount = useMemo(() => {
+    const { selectedNodes, selectedEdges } = selectedElements
+    return selectedNodes.length + selectedEdges.length
+  }, [selectedElements])
+
+  const deleteContext = useMemo(() => {
+    const { selectedNodes, selectedEdges } = selectedElements
+    if (selectedNodes.length === 0) return 'EDGE_ONLY'
+    if (selectedEdges.length === 0) return 'MODE_ONLY'
+    return 'BOTH'
+  }, [selectedElements])
+
+  useHotkeys([DATAHUB_HOTKEY.BACKSPACE, DATAHUB_HOTKEY.DELETE], () => {
+    const { selectedNodes, selectedEdges } = selectedElements
+    const canDeleteNodes = selectedNodes.map((node) => canDeleteNode(node, status))
+    const canDeleteEdges = selectedEdges.map((edge) => canDeleteEdge(edge, nodes))
+
+    const allElements = [...canDeleteNodes, ...canDeleteEdges]
+    const canDeleteElements = allElements.every((element) => Boolean(element.delete))
+    if (canDeleteElements) {
+      return onOpen()
+    }
+
+    const allErrors = allElements.reduce<string[]>((acc, cur) => {
+      if (cur.error && !acc.includes(cur.error)) {
+        acc.push(cur.error)
+      }
+      return acc
+    }, [])
+    if (!toast.isActive(DATAHUB_TOAST_ID))
+      toast({
+        ...dataHubToastOption,
+        id: DATAHUB_TOAST_ID,
+        title: t('workspace.deletion.modal.header', { count: SelectedElementsCount }),
+        status: 'error',
+        description: (
+          <VStack alignItems="flex-start">
+            <Text>{t('workspace.deletion.guards.message', { count: SelectedElementsCount })}</Text>
+            <UnorderedList>
+              {allErrors.map((error, index) => (
+                <ListItem key={`toto-${index}`}>{error}</ListItem>
+              ))}
+            </UnorderedList>
+          </VStack>
+        ),
+      })
+  })
+
+  const handleConfirmOnSubmit = () => {
+    const { selectedNodes, selectedEdges } = selectedElements
+    onEdgesChange(selectedEdges.map<EdgeRemoveChange>((edge) => ({ id: edge.id, type: 'remove' })))
+    onNodesChange(selectedNodes.map<NodeRemoveChange>((node) => ({ id: node.id, type: 'remove' })))
+    setStatus(DesignerStatus.MODIFIED)
+  }
+
+  return (
+    <ConfirmationDialog
+      isOpen={isOpen}
+      onClose={onClose}
+      onSubmit={handleConfirmOnSubmit}
+      message={t('workspace.deletion.modal.message', {
+        context: deleteContext,
+        count: SelectedElementsCount,
+      })}
+      header={t('workspace.deletion.modal.header', { count: SelectedElementsCount })}
+    />
+  )
+}
+
+export default DeleteListener

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/DeleteListener.tsx

@@ -24,6 +24,7 @@ import ToolboxSelectionListener from '@datahub/components/controls/ToolboxSelect
 import { CopyPasteListener } from '@datahub/components/controls/CopyPasteListener.tsx'
 import CopyPasteStatus from '@datahub/components/controls/CopyPasteStatus.tsx'
 import ConnectionLine from '@datahub/components/nodes/ConnectionLine.tsx'
+import DeleteListener from '@datahub/components/controls/DeleteListener.tsx'
 
 export type OnConnectStartParams = {
   nodeId: string | null
@@ -161,11 +162,13 @@ const PolicyEditor: FC = () => {
           onDragOver={onDragOver}
           onDrop={onDrop}
           isValidConnection={checkValidity}
+          deleteKeyCode={[]}
 
           // onError={(id: string, message: string) => console.log('XXXXXX e', id, message)}
         >
           <Box role="toolbar" aria-label={t('workspace.aria-label')} aria-controls="edge-workspace-canvas">
             <ToolboxSelectionListener />
+            <DeleteListener />
             <CopyPasteListener render={(copiedNodes) => <CopyPasteStatus nbCopied={copiedNodes.length} />} />
             <DesignerToolbox />
             <CanvasControls />