[3849] Trees in forms can display the same element many times

Bug: #3849
Signed-off-by: Guillaume Coutable <[email protected]>

CHANGELOG.adoc

@@ -74,6 +74,7 @@ As a result, the following maven modules have been deleted: `sirius-web-sample-a
 - https://github.com/eclipse-sirius/sirius-web/issues/3776[#3776] [trees] Restore expand all functionality for ref widget trees
 - https://github.com/eclipse-sirius/sirius-web/issues/3824[#3824] [core] Fix representation migration participant execution which was failing when there were many representation migration participant to apply.
 - https://github.com/eclipse-sirius/sirius-web/issues/3851[#3851] [trees] Fix an issue where the tree filters menu items were not displayed anymore after a click on the filters menu.
+- https://github.com/eclipse-sirius/sirius-web/issues/3849[#3849] [form] Fix the tree representation in form support the display of the same referenced element many times in the tree.
 
 === New Features
 

packages/forms/frontend/sirius-components-forms/src/propertysections/TreePropertySection.tsx

@@ -101,7 +101,7 @@ export const editTreeCheckboxMutation = gql`
   }
 `;
 
-const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }: TreeItemProps) => {
+const TreeItem = ({ treeItemId, node, nodes, readOnly, editingContextId, formId, widgetId }: TreeItemProps) => {
   const { classes } = useTreeItemWidgetStyles();
   const { setSelection } = useSelection();
 
@@ -177,19 +177,23 @@ const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }:
 
   const childNodes = nodes.filter((childNode) => childNode.parentId === node.id);
   return (
-    <MuiTreeItem itemId={node.id} label={label} classes={{ content: classes.content }}>
-      {childNodes.map((childNode) => (
-        <TreeItem
-          node={childNode}
-          nodes={nodes}
-          key={childNode.id}
-          readOnly={readOnly}
-          aria-role="treeitem"
-          editingContextId={editingContextId}
-          formId={formId}
-          widgetId={widgetId}
-        />
-      ))}
+    <MuiTreeItem itemId={treeItemId} label={label} classes={{ content: classes.content }}>
+      {childNodes.map((childNode, index) => {
+        const childTreeItemId = `${treeItemId}/${index}`;
+        return (
+          <TreeItem
+            treeItemId={childTreeItemId}
+            node={childNode}
+            nodes={nodes}
+            key={childTreeItemId}
+            readOnly={readOnly}
+            aria-role="treeitem"
+            editingContextId={editingContextId}
+            formId={formId}
+            widgetId={widgetId}
+          />
+        );
+      })}
     </MuiTreeItem>
   );
 };
@@ -226,17 +230,21 @@ export const TreePropertySection: PropertySectionComponent<GQLTree> = ({
       <SimpleTreeView
         slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }}
         defaultExpandedItems={expandedNodesIds}>
-        {rootNodes.map((rootNode) => (
-          <TreeItem
-            node={rootNode}
-            nodes={nodes}
-            key={rootNode.id}
-            readOnly={readOnly || widget.readOnly}
-            editingContextId={editingContextId}
-            formId={formId}
-            widgetId={widget.id}
-          />
-        ))}
+        {rootNodes.map((rootNode, index) => {
+          const rootItemId = `${index}`;
+          return (
+            <TreeItem
+              treeItemId={rootItemId}
+              node={rootNode}
+              nodes={nodes}
+              key={rootItemId}
+              readOnly={readOnly || widget.readOnly}
+              editingContextId={editingContextId}
+              formId={formId}
+              widgetId={widget.id}
+            />
+          );
+        })}
       </SimpleTreeView>
     </div>
   );

packages/forms/frontend/sirius-components-forms/src/propertysections/TreePropertySection.types.ts

@@ -15,6 +15,7 @@ import { GQLMessage } from '@eclipse-sirius/sirius-components-core';
 import { GQLTreeNode } from '../form/FormEventFragments.types';
 
 export interface TreeItemProps {
+  treeItemId: string;
   node: GQLTreeNode;
   nodes: GQLTreeNode[];
   readOnly: boolean;

packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/TreePropertySection.test.tsx

@@ -119,7 +119,7 @@ test('should render a multi-level tree correctly', () => {
       createNode('1.3.1.2', '1.3.1'),
       createNode('2.1', '2'),
     ],
-    expandedNodesIds: ['1', '2', '1.1', '1.3', '1.3.1'],
+    expandedNodesIds: ['0', '1', '0/0', '0/2', '0/2/0'],
     diagnostics: [],
   };
   const { container } = render(
@@ -180,7 +180,7 @@ test('should correctly interpret the order of nodes with the same parent in the
       createNode('1.3.1', '1.3'),
       createNode('2.1', '2'),
     ],
-    expandedNodesIds: ['1', '2', '1.1', '1.3', '1.3.1'],
+    expandedNodesIds: ['1', '0', '1/0', '1/1', '1/1/0'],
     diagnostics: [],
   };
   const { container } = render(
@@ -238,7 +238,7 @@ test('should only expand the specified nodes on initial render', () => {
       createNode('1.3.1.2', '1.3.1'),
       createNode('2.1', '2'),
     ],
-    expandedNodesIds: ['1', '2', '1.3.1.2'],
+    expandedNodesIds: ['0', '1', '0/2/0/1'],
     diagnostics: [],
   };
   const { container } = render(
@@ -282,7 +282,7 @@ test('should change the selection when a selectable node is clicked', () => {
     readOnly: false,
     hasHelpText: false,
     nodes: [createNode('1', ''), createNode('2', ''), createNode('1.1', '1', true), createNode('1.2', '1', false)],
-    expandedNodesIds: ['1', '2'],
+    expandedNodesIds: ['0', '1'],
     diagnostics: [],
   };
 
@@ -341,7 +341,7 @@ test('should collapse/expand a non-selectable node when clicked', async () => {
     readOnly: false,
     hasHelpText: false,
     nodes: [createNode('1', ''), createNode('1.1', '1'), createNode('1.1.1', '1.1')],
-    expandedNodesIds: ['1', '1.1'],
+    expandedNodesIds: ['0', '0/0'],
     diagnostics: [],
   };
   let selection: SelectionEntry = { id: 'undefined', kind: '' };