[3437] Migrate to MUI 5

Bug: #3437 Signed-off-by: Denis Nikiforov <[email protected]>
eclipse-sirius · Jun 3, 2024 · 547f119 · 547f119
1 parent 128d890
commit 547f119
Show file tree

Hide file tree

Showing 258 changed files with 9,391 additions and 25,515 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -24,6 +24,7 @@
 - [releng] Remove the dependency to `reflect-metadata`
 - [releng] Switch to `subscriptions-transport-ws` 0.11.0
 - https://github.com/eclipse-sirius/sirius-web/issues/3466[#3466] [gantt] Move to @ObeoNetwork/gantt-task-react 0.4.14 to benefit for enhancements
+- 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/collapse.cy.ts b/integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts
@@ -80,6 +80,9 @@ describe('Diagram - collapsible node', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
+        cy.on('uncaught:exception', (err) =>
+          err.message.includes('ResizeObserver loop limit exceeded') ? false : undefined
+        );
         explorer.createObject('Root', 'Entity1s Entity1');
         explorer.createObject('Entity1', 'Relation Entity2');
         explorer.select('Entity1');
@@ -89,7 +92,7 @@ describe('Diagram - collapsible node', () => {
           .getNodes('diagram', 'Entity1')
           .findByTestId('Label - Entity1')
           .should('have.css', 'border-bottom', '1px solid rgb(51, 176, 195)');
-        diagram.getNodes('diagram', 'Entity1').click('top');
+        diagram.getNodes('diagram', 'Entity1').click(1, 1);
         diagram.getPalette().should('exist');
         diagram.getPalette().findByTestId('Collapse - Tool').click();
         diagram

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,22 +56,25 @@ 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('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/diagrams/edges.cy.ts b/integration-tests/cypress/e2e/project/diagrams/edges.cy.ts
@@ -12,9 +12,9 @@
  *******************************************************************************/
 import { Project } from '../../../pages/Project';
 import { Studio } from '../../../usecases/Studio';
-import { Explorer } from '../../../workbench/Explorer';
 import { Details } from '../../../workbench/Details';
 import { Diagram } from '../../../workbench/Diagram';
+import { Explorer } from '../../../workbench/Explorer';
 
 describe('Diagram - edges', () => {
   context('Given a studio template', () => {

diff --git a/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts b/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts
@@ -180,7 +180,7 @@ describe('Diagram - group palette', () => {
         explorer.select('attribute');
         explorer.select('package', true);
         diagram.fitToScreen();
-        diagram.getNodes('diagram', 'package').click('top');
+        diagram.getNodes('diagram', 'attribute').click();
         diagram.getGroupPalette().should('exist');
         diagram.getGroupPalette().findByTestId('Align left').should('not.exist');
       });

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);
   });
 });