[3437] Migrate to MUI 5

Bug: #3437 Signed-off-by: Denis Nikiforov <[email protected]> Signed-off-by: Michaël Charfadi <[email protected]> Signed-off-by: Stéphane Bégaudeau <[email protected]>
eclipse-sirius · Aug 6, 2024 · baef1d6 · baef1d6
1 parent 0efae5e
commit baef1d6
Show file tree

Hide file tree

Showing 268 changed files with 14,163 additions and 30,616 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -49,12 +49,14 @@ As a result, the following maven modules have been deleted: `sirius-web-sample-a
 ```
 
 * The `String` attribute `org.eclipse.sirius.components.collaborative.diagrams.dto.InvokeSingleClickOnDiagramElementToolInput#selectedObjectId` has been replaced by the attribute `variables` of type `List<ToolVariable>`
+- https://github.com/eclipse-sirius/sirius-web/issues/3437[#3437] [core] Migrate frontend to MUI 5, if you contributed React componenent that use MUI, you should upgrade them to use MUI 5.
 
 === Dependency update
 
 - [releng] Switch to `maven-checkstyle-plugin` 3.4.0
 - [releng] Switch to Spring Boot 3.3.1
 - [releng] Add a dependency to CycloneDX to compute the software bill of materials during the build
+- https://github.com/eclipse-sirius/sirius-web/issues/3437[#3437] [core] Migrate frontend to MUI 5
 
 === Bug fixes
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts b/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts
@@ -33,19 +33,19 @@ describe('/projects/:projectId/edit - Custom Shape', () => {
     cy.getByTestId('delete').click();
     cy.getByTestId('Entity1 Node-more').click();
     cy.getByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription').click();
     cy.getByTestId('childCreationDescription')
       .get('[data-value="Ellipse Node Style Description"]')
       .should('exist')
       .click();
     cy.getByTestId('create-object').click();
 
-    cy.get('[title="Back to the homepage"]').click();
+    cy.get('[aria-label="Back to the homepage"]').click();
 
     // Create the domain instance
     cy.url().should('eq', Cypress.config().baseUrl + '/projects');
-    cy.get('[title="Blank Studio"]').should('be.visible');
+    cy.get('[aria-label="Blank Studio"]').should('be.visible');
     cy.getByTestId('create').click();
 
     cy.url().should('eq', Cypress.config().baseUrl + '/new/project');
@@ -56,23 +56,26 @@ describe('/projects/:projectId/edit - Custom Shape', () => {
     cy.getByTestId('empty').click();
     cy.getByTestId('Others...-more').click();
     cy.getByTestId('new-object').click();
-    cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled');
     cy.getByTestId('domain').click();
     cy.getByTestId('domain').get('[data-value^="domain://"]').should('exist').click();
     cy.getByTestId('create-object').click();
 
     cy.getByTestId('Root-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
-    cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('representationDescription')
+      .children('[role="combobox"]')
+      .invoke('text')
+      .should('have.length.gt', 1);
     cy.getByTestId('representationDescription').click();
     cy.get('[data-testid$=" Diagram Description"]').should('exist').click();
     cy.getByTestId('create-representation').click();
     cy.getByTestId('representation-area').should('exist');
 
     cy.getByTestId('Root-more').click();
     cy.getByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription').click();
     cy.getByTestId('childCreationDescription').get('[data-value="Entity1s Entity1"]').should('exist').click();
     cy.getByTestId('create-object').click();

diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js b/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js
@@ -125,10 +125,10 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('Tool').click();
     cy.getByTestId('Name').type('{selectAll}tool2_section2');
 
-    cy.get('[title="Back to the homepage"]').click();
+    cy.get('[aria-label="Back to the homepage"]').click();
 
     cy.url().should('eq', Cypress.config().baseUrl + '/projects');
-    cy.get('[title="Blank Studio"]').should('be.visible');
+    cy.get('[aria-label="Blank Studio"]').should('be.visible');
     cy.getByTestId('create').click();
 
     cy.url().should('eq', Cypress.config().baseUrl + '/new/project');
@@ -138,7 +138,7 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('empty').click();
     cy.getByTestId('Others...-more').click();
     cy.getByTestId('new-object').click();
-    cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled');
     cy.getByTestId('domain').click();
     cy.getByTestId('domain').get('[data-value^="domain://"]').should('exist').click();
@@ -270,7 +270,6 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 
-
   it('diagram palette is closed once element palette is opened', () => {
     createFlowReactFlowDiagram();
 

diff --git a/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js b/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js
@@ -60,7 +60,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     cy.wait(500); // Wait for representation to refresh
     cy.get('[data-testid^="Page-"]').not('[data-testid="Page-DropArea"]').should('have.lengthOf', 2);
     cy.get('[data-testid^="Page-"]').not('[data-testid="Page-DropArea"]').eq(1).click();
-    cy.get('[title="Group"]').should('exist');
+    cy.get('[aria-label="Group"]').should('exist');
   });
 
   it('try to rename a page', () => {
@@ -116,7 +116,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     const dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-Slider').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="Slider"]').should('be.visible');
+    cy.get('[aria-label="Slider"]').should('be.visible');
   });
 
   it('can create a slider widget in a Flexbox Container', () => {
@@ -126,28 +126,28 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     var dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="FlexboxContainer"]').should('be.visible');
+    cy.get('[aria-label="FlexboxContainer"]').should('be.visible');
     // Create a slider inside the Flexbox
     dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-Slider').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="FlexboxContainer-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="Slider"]').should('be.visible');
+    cy.get('[aria-label="Slider"]').should('be.visible');
   });
 
   it('display the page of the element selected', () => {
     // Creates a second page
     cy.getByTestId('New Form Description').click();
     cy.getByTestId('New Form Description-more').should('be.enabled').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription').click().get('[data-value="Page Description"]').should('exist').click();
     cy.getByTestId('create-object').click();
     // Adds a widget to the first page
     cy.getByTestId('PageDescription').eq(0).dblclick();
     cy.getByTestId('GroupDescription').eq(0).click();
     cy.getByTestId('GroupDescription-more').eq(0).should('be.enabled').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription')
       .click()
       .get('[data-value="Widgets Pie Chart Description"]')
@@ -159,7 +159,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     cy.getByTestId('GroupDescription').eq(1).click();
     cy.getByTestId('GroupDescription-more').eq(1).should('be.enabled').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription')
       .click()
       .get('[data-value="Widgets Bar Chart Description"]')
@@ -200,12 +200,12 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     const dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-ReferenceWidget').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="ReferenceWidget"]').should('be.visible');
+    cy.get('[aria-label="ReferenceWidget"]').should('be.visible');
     cy.getByTestId('PageDescription').dblclick();
     cy.getByTestId('GroupDescription').dblclick();
     cy.getByTestId('ReferenceWidgetDescription-more').should('be.enabled').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription')
       .click()
       .get('[data-value="Conditional Styles Conditional Reference Widget Description Style"]')
@@ -227,18 +227,18 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     var dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="FlexboxContainer"]').should('be.visible');
+    cy.get('[aria-label="FlexboxContainer"]').should('be.visible');
     // Create a Reference inside the Flexbox
     dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-ReferenceWidget').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="FlexboxContainer-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="ReferenceWidget"]').should('be.visible');
+    cy.get('[aria-label="ReferenceWidget"]').should('be.visible');
   });
 
   function checkWidgetIsEnabledExpression(widgetName, should) {
     cy.getByTestId('GroupDescription-more').should('be.enabled').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription')
       .click()
       .get('[data-value="' + widgetName + ' Description"]')
@@ -264,7 +264,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
 
   function createBorderStyleAndCheckProperties(styleName) {
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
-    cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+    cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription')
       .click()
       .get('[data-value="' + styleName + '"]')
@@ -296,7 +296,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     var dataTransfer = new DataTransfer();
     cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer });
     cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
-    cy.get('[title="FlexboxContainer"]').should('be.visible');
+    cy.get('[aria-label="FlexboxContainer"]').should('be.visible');
 
     cy.getByTestId('GroupDescription').dblclick();
     cy.getByTestId('FlexboxContainerDescription-more').click();
@@ -316,42 +316,42 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
 
     // Create top-level If, For and Flexbox inside the Group
     createControl('FormElementIf', 'Group-Widgets-DropArea', 0);
-    cy.get('[title="FormDescriptionEditorIf"]').eq(0).should('be.visible');
+    cy.get('[aria-label="FormDescriptionEditorIf"]').eq(0).should('be.visible');
     createControl('FormElementFor', 'Group-Widgets-DropArea', 0);
-    cy.get('[title="FormDescriptionEditorFor"]').eq(0).should('be.visible');
+    cy.get('[aria-label="FormDescriptionEditorFor"]').eq(0).should('be.visible');
     createControl('FlexboxContainer', 'Group-Widgets-DropArea', 0);
-    cy.get('[title="FlexboxContainer"]').eq(0).should('be.visible');
+    cy.get('[aria-label="FlexboxContainer"]').eq(0).should('be.visible');
 
     // NOTE: the indexes for the target drop-area depend on the order in which the
     // widgets of the same kind were created and appear before on the page.
 
     // If, For, Flexbox and Label widget inside an If
     createControl('FormElementIf', 'FormDescriptionEditorIf-Widgets-DropArea', 0);
-    cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 2);
+    cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 2);
     createControl('FormElementFor', 'FormDescriptionEditorIf-Widgets-DropArea', 1);
-    cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 2);
+    cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 2);
     createControl('FlexboxContainer', 'FormDescriptionEditorIf-Widgets-DropArea', 1);
-    cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 2);
+    cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 2);
     createControl('Label', 'FormDescriptionEditorIf-Widgets-DropArea', 1);
-    cy.get('[title="LabelWidget"]').should('have.lengthOf', 1);
+    cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 1);
 
     // The same, but inside the For
     createControl('FormElementIf', 'FormDescriptionEditorFor-Widgets-DropArea', 1);
-    cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 3);
+    cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 3);
     createControl('FormElementFor', 'FormDescriptionEditorFor-Widgets-DropArea', 1);
-    cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 3);
+    cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 3);
     createControl('FlexboxContainer', 'FormDescriptionEditorFor-Widgets-DropArea', 2);
-    cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 3);
+    cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 3);
     createControl('Label', 'FormDescriptionEditorFor-Widgets-DropArea', 2);
-    cy.get('[title="LabelWidget"]').should('have.lengthOf', 2);
+    cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 2);
     // The same, but inside the flexbox container
     createControl('FormElementIf', 'FlexboxContainer-Widgets-DropArea', 2);
-    cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 4);
+    cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 4);
     createControl('FormElementFor', 'FlexboxContainer-Widgets-DropArea', 2);
-    cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 4);
+    cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 4);
     createControl('FlexboxContainer', 'FlexboxContainer-Widgets-DropArea', 2);
-    cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 4);
+    cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 4);
     createControl('Label', 'FlexboxContainer-Widgets-DropArea', 3);
-    cy.get('[title="LabelWidget"]').should('have.lengthOf', 2);
+    cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 2);
   });
 });
diff --git a/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts b/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts
@@ -165,7 +165,7 @@ describe('Forms Widget-reference', () => {
         cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist');
         cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist');
         cy.getByTestId('childCreationDescription')
-          .children('[role="button"]')
+          .children('[role="combobox"]')
           .invoke('text')
           .should('have.length.gt', 1);
         cy.getByTestId('childCreationDescription').click();
@@ -197,7 +197,7 @@ describe('Forms Widget-reference', () => {
         cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist');
         cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist');
         cy.getByTestId('childCreationDescription')
-          .children('[role="button"]')
+          .children('[role="combobox"]')
           .invoke('text')
           .should('have.length.gt', 1);
         cy.getByTestId('childCreationDescription').click();
@@ -251,7 +251,7 @@ describe('Forms Widget-reference', () => {
         cy.getByTestId('create-modal').findByTestId('standard').should('not.exist');
         cy.getByTestId('create-modal').findByTestId('CompositeProcessor1').click();
         cy.getByTestId('childCreationDescription')
-          .children('[role="button"]')
+          .children('[role="combobox"]')
           .invoke('text')
           .should('have.length.gt', 1);
         cy.getByTestId('childCreationDescription').click();
@@ -341,7 +341,10 @@ describe('Forms Widget-reference', () => {
       cy.getByTestId('create-modal').should('exist');
       cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist');
       cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist');
-      cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+      cy.getByTestId('childCreationDescription')
+        .children('[role="combobox"]')
+        .invoke('text')
+        .should('have.length.gt', 1);
       cy.getByTestId('childCreationDescription').click();
       cy.getByTestId('childCreationDescription').get('[data-value]').should('have.length', 1);
       cy.getByTestId('childCreationDescription')
@@ -361,7 +364,10 @@ describe('Forms Widget-reference', () => {
       cy.getByTestId('create-modal').should('exist');
       cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist');
       cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist');
-      cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
+      cy.getByTestId('childCreationDescription')
+        .children('[role="combobox"]')
+        .invoke('text')
+        .should('have.length.gt', 1);
       cy.getByTestId('childCreationDescription').click();
       cy.getByTestId('childCreationDescription').get('[data-value]').should('have.length', 1);
       cy.getByTestId('childCreationDescription')