[2329] Use reference widget in details view

Bug: #2329
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -86,6 +86,7 @@ This will be fixed in the next version.
 - https://github.com/eclipse-sirius/sirius-web/issues/2208[#2208] [diagram] Add Cypress tests for React Flow.
 - https://github.com/eclipse-sirius/sirius-web/issues/2198[#2198] [view] Add a default Color Palette on View creation
 - https://github.com/eclipse-sirius/sirius-web/issues/2228[#2228] [domain] Creating a domain from the onboard area action now initialize its name.
+- https://github.com/eclipse-sirius/sirius-web/issues/2329[#2329] [form] Change the default representation in the details view for non containment reference from a select widget to a reference widget.
 
 == v2023.8.0
 

integration-tests/cypress/e2e/project/edit/color-palette.cy.js

@@ -54,6 +54,7 @@ describe('/projects/:projectId/edit - Color Palette', () => {
     cy.getByTestId('Name').clear().type('OtherColorPalette{enter}');
     cy.getByTestId('OtherColorPalette-more').click();
     cy.getByTestId('new-object').click();
+    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription').click().get('[data-value="Fixed Color"]').should('exist');
   });
 
@@ -63,9 +64,12 @@ describe('/projects/:projectId/edit - Color Palette', () => {
     cy.get('[title="diagram::DiagramDescription"]').dblclick();
     cy.getByTestId('Entity1 Node-toggle').click();
     cy.get('[title="diagram::RectangularNodeStyleDescription"]').click();
-    cy.getByTestId('Label Color').click().get('[data-value="color_dark"]').should('exist').click();
-    cy.getByTestId('Color').click().get('[data-value="color_dark"]').should('exist').click();
-    cy.getByTestId('Border Color').click().get('[data-value="border_blue"]').should('exist').click();
+    cy.getByTestId('Label Color').click();
+    cy.getByTestId('option-color_dark').should('exist').click();
+    cy.getByTestId('Color').click();
+    cy.getByTestId('option-color_dark').should('exist').click();
+    cy.getByTestId('Border Color').click();
+    cy.getByTestId('option-border_green').should('exist').click();
   });
 
   it('can select color from color palette in edge style properties', () => {
@@ -75,7 +79,6 @@ describe('/projects/:projectId/edit - Color Palette', () => {
     cy.getByTestId('LinkedTo Edge-toggle').click();
     cy.get('[title="diagram::EdgeStyle"]').click();
     cy.getByTestId('Color').click();
-    cy.contains('FixedColor color_blue').click();
+    cy.getByTestId('option-color_blue').should('exist').click();
   });
 });
-

packages/compatibility/backend/sirius-components-compatibility-emf/pom.xml

@@ -12,14 +12,14 @@
      Obeo - initial API and implementation
 -->
 <project xmlns="http://maven.apache.org/POM/4.0.0"
-	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 	<modelVersion>4.0.0</modelVersion>
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
 		<version>3.1.2</version>
-		<relativePath /> <!-- lookup parent from repository -->
+		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<groupId>org.eclipse.sirius</groupId>
 	<artifactId>sirius-components-compatibility-emf</artifactId>
@@ -75,6 +75,11 @@
 			<artifactId>sirius-components-emf</artifactId>
 			<version>2023.8.2</version>
 		</dependency>
+		<dependency>
+			<groupId>org.eclipse.sirius</groupId>
+			<artifactId>sirius-components-widget-reference</artifactId>
+			<version>2023.8.2</version>
+		</dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-test</artifactId>