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

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

CHANGELOG.adoc

@@ -72,6 +72,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

@@ -81,6 +81,13 @@ const isErrorPayload = (payload: GQLEditTreeCheckboxPayload): payload is GQLErro
 const isSuccessPayload = (payload: GQLEditTreeCheckboxPayload): payload is GQLSuccessPayload =>
   payload.__typename === 'SuccessPayload';
 
+const getTreeItemId = (parentId: string | null, nodeId: string): string => {
+  if (parentId) {
+    return `${parentId}/${nodeId}`;
+  }
+  return nodeId;
+};
+
 export const editTreeCheckboxMutation = gql`
   mutation editTreeCheckbox($input: EditTreeCheckboxInput!) {
     editTreeCheckbox(input: $input) {
@@ -101,7 +108,7 @@ export const editTreeCheckboxMutation = gql`
   }
 `;
 
-const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }: TreeItemProps) => {
+const TreeItem = ({ parentId, node, nodes, readOnly, editingContextId, formId, widgetId }: TreeItemProps) => {
   const { classes } = useTreeItemWidgetStyles();
   const { setSelection } = useSelection();
 
@@ -142,14 +149,18 @@ const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }:
 
   const handleClick: React.MouseEventHandler<HTMLDivElement> = () => {
     if (node.selectable) {
+      const treePath = node.id.split('/');
+      const nodeId = treePath[treePath.length - 1];
       const newSelection: SelectionEntry = {
-        id: node.id,
+        id: nodeId,
         kind: node.kind,
       };
       setSelection({ entries: [newSelection] });
     }
   };
 
+  const treeItemId = getTreeItemId(parentId, node.id);
+
   const label = (
     <div className={classes.label} onClick={handleClick}>
       {node.checkable ? (
@@ -177,9 +188,10 @@ 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 }}>
+    <MuiTreeItem itemId={treeItemId} label={label} classes={{ content: classes.content }}>
       {childNodes.map((childNode) => (
         <TreeItem
+          parentId={treeItemId}
           node={childNode}
           nodes={nodes}
           key={childNode.id}
@@ -228,6 +240,7 @@ export const TreePropertySection: PropertySectionComponent<GQLTree> = ({
         defaultExpandedItems={expandedNodesIds}>
         {rootNodes.map((rootNode) => (
           <TreeItem
+            parentId={null}
             node={rootNode}
             nodes={nodes}
             key={rootNode.id}

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 {
+  parentId: string | null;
   node: GQLTreeNode;
   nodes: GQLTreeNode[];
   readOnly: boolean;