Update react-flow

cypress.config.ts

@@ -5,4 +5,5 @@ export default defineConfig({
   fixturesFolder: false,
   screenshotOnRunFailure: false,
   defaultCommandTimeout: 10_000,
+  allowCypressEnv: false,
 });

cypress/e2e/links/linkAttributes.cy.ts

@@ -5,11 +5,11 @@ beforeEach(() => {
   cy.dragNodeInCanvas('ewokscore.tests.examples.tasks.sumlist.SumList');
   cy.dragNodeInCanvas('ewokscore.tests.examples.tasks.sumlist.SumList');
   cy.waitForStableDOM();
-  cy.findByRole('button', { name: 'SumList0' })
+  cy.findNode('SumList0')
     .find('.react-flow__handle-right')
     .click({ force: true });
 
-  cy.findByRole('button', { name: 'SumList1' })
+  cy.findNode('SumList1')
     .find('.react-flow__handle-left')
     .click({ force: true });
 

cypress/e2e/nodes.cy.ts

@@ -2,10 +2,7 @@ beforeEach(() => {
   cy.loadApp();
   cy.findByRole('button', { name: 'Close task drawer' }).click();
   cy.waitForStableDOM();
-  cy.findAllByRole('button', { name: 'ewoksweb' })
-    .filter('.react-flow__node')
-    .as('node', { type: 'static' })
-    .click();
+  cy.findNode('ewoksweb').as('node', { type: 'static' }).click();
 });
 
 it('changes label of node', () => {

cypress/e2e/specialNodes.cy.ts

@@ -74,17 +74,13 @@ it('Saves special nodes', () => {
   cy.findByRole('button', { name: 'General' }).click();
 
   cy.dragNodeInCanvas('note');
-  cy.findByRole('button', { name: 'Note0' }).click({ force: true });
+  cy.findNode('Note0').click({ force: true });
 
   cy.dragNodeInCanvas('graphInput');
   cy.dragNodeInCanvas('graphOutput');
   cy.waitForStableDOM();
-  cy.findByRole('button', { name: 'In0' })
-    .find('.react-flow__handle-right')
-    .click({ force: true });
-  cy.findByRole('button', { name: 'Out0' })
-    .find('.react-flow__handle-left')
-    .click({ force: true });
+  cy.findNode('In0').find('.react-flow__handle-right').click({ force: true });
+  cy.findNode('Out0').find('.react-flow__handle-left').click({ force: true });
 
   cy.dragNodeInCanvas('graphInput');
   cy.dragNodeInCanvas('graphOutput');

cypress/e2e/tasks/generalTasks.cy.ts

@@ -47,21 +47,21 @@ it('does not allow to edit node inputs or task info for graph input, graph outpu
 
   cy.dragNodeInCanvas('graphInput');
   cy.waitForStableDOM();
-  cy.findByRole('button', { name: 'In0' }).click();
+  cy.findNode('In0').click();
   cy.findByRole('heading', { name: 'Default Inputs' }).should('not.exist');
   cy.findByRole('heading', { name: 'Task Info' }).should('not.exist');
 
   cy.dragNodeInCanvas('graphOutput');
   cy.waitForStableDOM();
-  cy.findByRole('button', { name: 'Out0' })
+  cy.findNode('Out0')
     // Is under the graphInput node
     .click({ force: true });
   cy.findByRole('heading', { name: 'Default Inputs' }).should('not.exist');
   cy.findByRole('heading', { name: 'Task Info' }).should('not.exist');
 
   cy.dragNodeInCanvas('note');
   cy.waitForStableDOM();
-  cy.findByRole('button', { name: 'Note0' })
+  cy.findNode('Note0')
     // Is under the graphInput/graphOutput nodes
     .click({ force: true });
 
@@ -85,7 +85,5 @@ it('adds a subworkflow node by dragging the subworkflow task', () => {
   cy.findByRole('option', { name: 'Adding-Tasks' }).click();
   cy.waitForStableDOM();
 
-  cy.findAllByRole('button', { name: /Adding-Tasks/ })
-    .filter('.react-flow__node')
-    .should('contain.text', 'graphInputgraphOutput');
+  cy.findNode(/Adding-Tasks/).should('contain.text', 'graphInputgraphOutput');
 });

cypress/e2e/workflows/changeDetection.cy.ts

@@ -2,9 +2,7 @@ beforeEach(() => {
   cy.loadApp();
   cy.findByRole('button', { name: 'Close task drawer' }).click();
   cy.waitForStableDOM();
-  cy.findAllByRole('button', { name: 'ewoksweb' })
-    .filter('.react-flow__node')
-    .as('node', { type: 'static' });
+  cy.findNode('ewoksweb').as('node', { type: 'static' });
 });
 
 it('does not show a red dot on the save button if there are no changes', () => {

cypress/e2e/workflows/saveOnServer.cy.ts

@@ -138,10 +138,7 @@ it('saves a workflow with an empty skeleton node, and saves the workflow after p
 
   cy.saveNewWorkflow(id);
 
-  cy.findAllByRole('button', { name: 'taskSkeleton0' })
-    .filter('.react-flow__node')
-    .as('node', { type: 'static' })
-    .click();
+  cy.findNode('taskSkeleton0').as('node', { type: 'static' }).click();
 
   cy.findByRole('textbox', { name: 'Edit label' }).clear().type('theNewLabel');
   cy.findByRole('textbox', { name: 'Edit comment' })

cypress/support/commands.ts

@@ -91,4 +91,8 @@ Cypress.Commands.add('hasVisibleEdges', (expectedNumberOfEdges: number) => {
     .should('be.visible');
 });
 
+Cypress.Commands.add('findNode', (nodeLabel: RegExp | string) => {
+  return cy.findByRole('group', { name: nodeLabel });
+});
+
 addWaitForStableDomCommand({ pollInterval: 300, timeout: 5000 });

cypress/support/index.ts

@@ -15,6 +15,7 @@ declare global {
       hasNavBarLabel(label: string): void;
       hasVisibleNodes(expectedNumberOfNodes: number): void;
       hasVisibleEdges(expectedNumberOfEdges: number): void;
+      findNode(nodeLabel: string | RegExp): Chainable;
     }
   }
 }

package.json

@@ -31,7 +31,7 @@
     "@mui/material": "5.14.13",
     "@react-hookz/web": "25.2.0",
     "@tanstack/react-query": "4.35.7",
-    "@xyflow/react": "12.3.2",
+    "@xyflow/react": "12.11.0",
     "axios": "1.5.1",
     "d3-format": "3.1.2",
     "elkjs": "0.11.1",

src/edition/Canvas/Canvas.tsx

@@ -39,7 +39,7 @@ import NoteNode from '../nodes/NoteNode';
 import OutputNode from '../nodes/OutputNode';
 import RegularNode from '../nodes/RegularNode';
 import AddSubworkflowDialog from '../TaskDrawer/AddSubworkflowDialog';
-import { generateNewNodeId } from '../utils';
+import { getNodeWithLabel, generateNewNodeId } from '../utils';
 import styles from './Canvas.module.css';
 import CanvasBackground from './CanvasBackground';
 import FallbackMessage from './FallbackMessage';
@@ -96,7 +96,12 @@ function Canvas(props: Props) {
 
   function onNodesChange(changes: NodeChange[]) {
     const newNodes = applyNodeChanges(changes, getNodes());
-    storeRF.getState().setNodes(newNodes);
+    const nodeData = getNodesData();
+    storeRF
+      .getState()
+      .setNodes(
+        newNodes.map((node) => getNodeWithLabel(node, nodeData.get(node.id))),
+      );
   }
 
   function onEdgesChange(changes: EdgeChange[]) {

src/edition/Sidebar/edit/models.ts

@@ -1,3 +1,3 @@
-import type { MarkerType } from '@xyflow/react';
+import { type EwoksMarkerEnd } from '../../../ewoksTypes';
 
-export type MarkerEndOption = MarkerType | 'none';
+export type MarkerEndOption = EwoksMarkerEnd;

src/edition/Sidebar/edit/utils.ts

@@ -1,5 +1,7 @@
 import type { RFMarkerEnd } from '../../../types';
 import type { MarkerEndOption } from './models';
+import { convertRFMarkerEndToEwoks } from '../../../utils/utils';
+import { DEFAULT_LINK_VALUES } from '../../../utils/defaultValues';
 
 export function markerEndOptionToRF(option: MarkerEndOption): RFMarkerEnd {
   if (option === 'none') {
@@ -10,11 +12,10 @@ export function markerEndOptionToRF(option: MarkerEndOption): RFMarkerEnd {
 }
 
 export function rfMarkerEndToOption(markerEnd: RFMarkerEnd): MarkerEndOption {
-  if (!markerEnd || typeof markerEnd === 'string') {
-    return 'none';
-  }
-
-  return markerEnd.type;
+  return (
+    convertRFMarkerEndToEwoks(markerEnd) ||
+    DEFAULT_LINK_VALUES.uiProps.markerEnd.type
+  );
 }
 
 export function colorToRFEdgeStyle(color: string | undefined) {

src/edition/utils.ts

@@ -1,4 +1,5 @@
-import type { Task } from '../types';
+import { type Node } from '@xyflow/react';
+import type { NodeData, Task } from '../types';
 import { getTaskName } from '../utils';
 
 export const GRAPH_INPUT_ICON = 'graphInput.svg';
@@ -32,3 +33,7 @@ export function generateNewNodeId(task: Task, nodesIds: string[]): string {
   }
   return `${prefix}${id}`;
 }
+
+export function getNodeWithLabel(node: Node, data: NodeData | undefined): Node {
+  return { ...node, ariaLabel: data?.ewoks_props.label || node.id };
+}

src/store/useWorkflowStore.ts

@@ -122,7 +122,10 @@ const useWorkflowStore = create<State>((set, get) => ({
     });
 
     const nodesWithoutData = rfNodes.map((node) => {
-      return { ...node, data: {} };
+      return {
+        ...node,
+        data: {},
+      };
     });
 
     const edgesWithoutData = rfLinks.map((edge) => {

src/utils/utils.ts

@@ -11,6 +11,7 @@ import type { DataMapping, RFMarkerEnd, RowValue } from '../types';
 import { RowType } from '../types';
 import { DEFAULT_LINK_VALUES } from './defaultValues';
 import { isMarkerType } from './typeGuards';
+import { type EdgeMarkerType, MarkerType } from '@xyflow/react';
 
 export function createDataMappingData(pair: EwoksDataMapping): DataMapping {
   return {
@@ -168,5 +169,14 @@ export function convertRFMarkerEndToEwoks(
     return undefined;
   }
 
-  return markerEnd.type;
+  const { type } = markerEnd;
+  if (type === 'arrow') {
+    return MarkerType.Arrow;
+  }
+
+  if (type === 'arrowclosed') {
+    return MarkerType.ArrowClosed;
+  }
+
+  return type;
 }