Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3437] Migrate to MUI 5 #3438

Merged
merged 1 commit into from
Aug 6, 2024
Merged

[3437] Migrate to MUI 5 #3438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
15 changes: 9 additions & 6 deletions integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts
View file
Open in desktop
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,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();
Expand Down
7 changes: 3 additions & 4 deletions integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js
View file
Open in desktop
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
58 changes: 29 additions & 29 deletions integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js
View file
Open in desktop
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);
});
});
16 changes: 11 additions & 5 deletions integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down
Loading