Skip to content

Commit

Permalink
[3437] Migrate to MUI 5
Browse files Browse the repository at this point in the history 
Bug: #3437
Signed-off-by: Denis Nikiforov <[email protected]>
  • Loading branch information
@AresEkb
AresEkb committed May 1, 2024
1 parent b8ead13 commit cc1ed2b
Show file tree
Hide file tree
Showing 254 changed files with 20,698 additions and 6,414 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ Its single method, `getTargetObjectId`, has been moved up into the main `IRepres
For representations which were *not* `ISemanticRepresentation` before, their target object is the `IEditingContext` itself if nothing more relevant is available.
Accordingly, `IObjectSearchService` and `IIdentityService` now handle actual `IEditingContext` instances as objects.
- https://github.com/eclipse-sirius/sirius-web/issues/3425[#3425] [diagram] In our GraphQL schema, `DiagramDescription` must now declare an `ArrangeLayoutDirection`.
- https://github.com/eclipse-sirius/sirius-web/issues/3437[#3437] [core] Migrate frontend to MUI 5

=== Dependency update

Expand Down
5 changes: 4 additions & 1 deletion integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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
Expand Down
15 changes: 9 additions & 6 deletions integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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();
Expand Down
7 changes: 3 additions & 4 deletions integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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();
Expand Down Expand Up @@ -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();

Expand Down
2 changes: 1 addition & 1 deletion integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
58 changes: 29 additions & 29 deletions integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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"]')
Expand All @@ -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"]')
Expand Down Expand Up @@ -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"]')
Expand All @@ -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"]')
Expand All @@ -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 + '"]')
Expand Down Expand Up @@ -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();
Expand All @@ -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);
});
});
Loading

0 comments on commit cc1ed2b

Please sign in to comment.