[3464] Improve i18n support for domain and view forms

Bug: #3464 Signed-off-by: Denis Nikiforov <[email protected]>
eclipse-sirius · Jun 17, 2024 · c214f26 · c214f26
1 parent 2132ea8
commit c214f26
Show file tree

Hide file tree

Showing 65 changed files with 1,644 additions and 394 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -93,6 +93,7 @@ image:doc/screenshots/insideLabelPositions.png[Inside label positions, 70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3623[#3623] [form] Remove unused form payload 
 - https://github.com/eclipse-sirius/sirius-web/issues/3627[#3627] [form] Remove unused mutation in form
 - https://github.com/eclipse-sirius/sirius-web/issues/3606[#3606] [test] Improve error handling in ExecuteEditingContextFunctionRunner and ExecuteEditingContextFunctionEventHandler
+- https://github.com/eclipse-sirius/sirius-web/issues/3464[#3464] [view] Improve i18n support for domain and view forms
 
 == v2024.5.0
 

diff --git a/integration-tests/cypress/e2e/project/deck/deck.cy.ts b/integration-tests/cypress/e2e/project/deck/deck.cy.ts
@@ -115,7 +115,7 @@ describe('Verify the Deck Representation', () => {
     });
     it('We create a new daily tag to verify that the deck is properly refreshed', () => {
       const explorer = new Explorer();
-      explorer.createObject('Daily Project Dev', 'Tag');
+      explorer.createObject('Daily Project Dev', 'ownedTags-TaskTag');
       explorer.select('::');
       const details = new Details();
       details.getTextField('Prefix').type('daily{enter}');

diff --git a/integration-tests/cypress/e2e/project/details/form.cy.ts b/integration-tests/cypress/e2e/project/details/form.cy.ts
@@ -11,47 +11,47 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { Project } from "../../../pages/Project";
-import { Flow } from "../../../usecases/Flow";
-import { Studio } from "../../../usecases/Studio";
-import { Details } from "../../../workbench/Details";
-import { Explorer } from "../../../workbench/Explorer";
+import { Project } from '../../../pages/Project';
+import { Flow } from '../../../usecases/Flow';
+import { Studio } from '../../../usecases/Studio';
+import { Details } from '../../../workbench/Details';
+import { Explorer } from '../../../workbench/Explorer';
 
 describe('/projects/:projectId/edit - Form', () => {
   context('Given a Form Description', () => {
     let studioProjectId: string = '';
 
     before(() =>
-        new Studio().createBlankStudioProjectWithView().then((createdProjectData) => {
-          studioProjectId = createdProjectData.projectId;
-          new Project().visit(createdProjectData.projectId);
-          const explorer = new Explorer();
-          explorer.expand('ViewDocument');
-          explorer.expand('View');
-          explorer.createObject('View', 'Form Description');
-          explorer.select('New Form Description');
-          const details = new Details();
-          details.getTextField('Domain Type').type('flow::System');
-          details.getTextField('Name').type('{selectall}').type('ReadOnlyRepresentation');
-          details.getTextField('Title Expression').type('{selectall}').type('ReadOnlyRepresentation');
-          explorer.expand('ReadOnlyRepresentation');
-          explorer.expand('PageDescription');
-          explorer.select('GroupDescription')
-          details.getTextField('Name').type('Group ReadOnly{enter}');
-          explorer.createObject('Group ReadOnly', 'Widgets Button Description');
-          details.getTextField('Button Label Expression').type('Test Button');
-          details.getTextField('Is Enabled Expression').type('aql:self.temperature==0');
-          explorer.createObject('Group ReadOnly', 'Widgets Flexbox Container Description');
-          details.getTextField('Name').invoke('text').should('eq', '');
-          details.getTextField('Name').type('Flexbox Container');
-          details.getTextField('Label Expression').type('Test flexbox container');
-          details.getTextField('Is Enabled Expression').type("aql:self.name='NewSystem'");
+      new Studio().createBlankStudioProjectWithView().then((createdProjectData) => {
+        studioProjectId = createdProjectData.projectId;
+        new Project().visit(createdProjectData.projectId);
+        const explorer = new Explorer();
+        explorer.expand('ViewDocument');
+        explorer.expand('View');
+        explorer.createObject('View', 'descriptions-FormDescription');
+        explorer.select('New Form Description');
+        const details = new Details();
+        details.getTextField('Domain Type').type('flow::System');
+        details.getTextField('Name').type('{selectall}').type('ReadOnlyRepresentation');
+        details.getTextField('Title Expression').type('{selectall}').type('ReadOnlyRepresentation');
+        explorer.expand('ReadOnlyRepresentation');
+        explorer.expand('Page Description');
+        explorer.select('Group Description');
+        details.getTextField('Name').type('Group ReadOnly{enter}');
+        explorer.createObject('Group ReadOnly', 'children-ButtonDescription');
+        details.getTextField('Button Label Expression').type('Test Button');
+        details.getTextField('Is Enabled Expression').type('aql:self.temperature==0');
+        explorer.createObject('Group ReadOnly', 'children-FlexboxContainerDescription');
+        details.getTextField('Name').invoke('text').should('eq', '');
+        details.getTextField('Name').type('Flexbox Container');
+        details.getTextField('Label Expression').type('Test flexbox container');
+        details.getTextField('Is Enabled Expression').type("aql:self.name='NewSystem'");
 
-          explorer.createObject('Flexbox Container', 'Textfield Description');
-          details.getTextField('Name').invoke('text').should('eq', '');
-          details.getTextField('Label Expression').type('Name');
-          details.getTextField('Value Expression').type('aql:self.name');
-        })
+        explorer.createObject('Flexbox Container', 'children-TextfieldDescription');
+        details.getTextField('Name').invoke('text').should('eq', '');
+        details.getTextField('Label Expression').type('Name');
+        details.getTextField('Value Expression').type('aql:self.name');
+      })
     );
     after(() => cy.deleteProject(studioProjectId));
 
@@ -68,16 +68,16 @@ describe('/projects/:projectId/edit - Form', () => {
       afterEach(() => cy.deleteProject(flowProjectId));
 
       it('check widget read-only mode in form', () => {
-          const explorer = new Explorer();
-          explorer.expand('FlowNewModel');
-          explorer.createRepresentation('NewSystem', 'ReadOnlyRepresentation', 'ReadOnlyRepresentation');
-          cy.getByTestId('Test Button').should('exist').should('not.be.disabled');
-          explorer.select('NewSystem');
-          const details = new Details();
-          details.getTextField('Temperature').type('{selectall}2{enter}');
-          cy.getByTestId('Test Button').should('be.disabled');
-          details.getTextField('Temperature').type('{selectall}0{enter}');
-          cy.getByTestId('Test Button').should('not.be.disabled');
+        const explorer = new Explorer();
+        explorer.expand('FlowNewModel');
+        explorer.createRepresentation('NewSystem', 'ReadOnlyRepresentation', 'ReadOnlyRepresentation');
+        cy.getByTestId('Test Button').should('exist').should('not.be.disabled');
+        explorer.select('NewSystem');
+        const details = new Details();
+        details.getTextField('Temperature').type('{selectall}2{enter}');
+        cy.getByTestId('Test Button').should('be.disabled');
+        details.getTextField('Temperature').type('{selectall}0{enter}');
+        cy.getByTestId('Test Button').should('not.be.disabled');
       });
 
       it('check the flexbox read-only mode is dispatched to children', () => {
@@ -90,7 +90,5 @@ describe('/projects/:projectId/edit - Form', () => {
         cy.getByTestId('page').findByTestId('input-Name').should('be.disabled');
       });
     });
-
-
   });
 });
diff --git a/integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts b/integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts
@@ -40,7 +40,7 @@ describe('Diagram - collapsible node', () => {
           cy.get('[title="domain::Domain"]').then(($div) => {
             domainName = $div.data().testid;
             explorer.expand(domainName);
-            explorer.createObject('Entity1', 'Relation');
+            explorer.createObject('Entity1', 'relations-Relation');
             details.getCheckBox('Containment').check();
             details.openReferenceWidgetOptions('Target Type');
             details.selectReferenceWidgetOption('Entity2');
@@ -53,7 +53,7 @@ describe('Diagram - collapsible node', () => {
             details.selectReferenceWidgetOption('Entity2 Node');
             explorer.expand('Entity1 Node');
             explorer.expand('aql:self.name');
-            explorer.select('InsideLabelStyle');
+            explorer.select('Inside Label Style 14');
             details.getCheckBox('With Header').check();
             details.getCheckBox('Display Header Separator').check();
           });
@@ -77,11 +77,15 @@ describe('Diagram - collapsible node', () => {
       afterEach(() => cy.deleteProject(instanceProjectId));
 
       it('Then a collapsed node does not display its header line', () => {
+        cy.on('uncaught:exception', (err) =>
+          err.message.includes('ResizeObserver loop limit exceeded') ? false : undefined
+        );
+
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
-        explorer.createObject('Root', 'Entity1s Entity1');
-        explorer.createObject('Entity1', 'Relation Entity2');
+        explorer.createObject('Root', 'entity1s-Entity1');
+        explorer.createObject('Entity1', 'relation-Entity2');
         explorer.select('Entity1');
         details.getTextField('Name').type('Entity1{enter}');
         diagram.fitToScreen();

diff --git a/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts b/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts
@@ -29,14 +29,14 @@ describe('/projects/:projectId/edit - Custom Shape', () => {
     cy.get('[data-testid$=" Diagram Description"]').dblclick();
     cy.getByTestId('Entity1 Node').dblclick();
 
-    cy.getByTestId('RectangularNodeStyleDescription-more').click();
+    cy.getByTestId('Rectangular Node Style Description 3-more').click();
     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').click();
     cy.getByTestId('childCreationDescription')
-      .get('[data-value="Ellipse Node Style Description"]')
+      .get('[data-value="style-EllipseNodeStyleDescription"]')
       .should('exist')
       .click();
     cy.getByTestId('create-object').click();
@@ -73,7 +73,7 @@ describe('/projects/:projectId/edit - Custom Shape', () => {
     cy.getByTestId('new-object').click();
     cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('childCreationDescription').click();
-    cy.getByTestId('childCreationDescription').get('[data-value="Entity1s Entity1"]').should('exist').click();
+    cy.getByTestId('childCreationDescription').get('[data-value="entity1s-Entity1"]').should('exist').click();
     cy.getByTestId('create-object').click();
 
     cy.getByTestId('Ellipse - ').should('have.css', 'border-radius', '50%');

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
@@ -106,22 +106,22 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('treeitem-contextmenu').findByTestId('rename-tree-item').click();
     cy.getByTestId('name-edit').type('Diagram Description{enter}');
 
-    cy.createChildObject('DiagramPalette', 'Diagram Tool Section');
+    cy.createChildObject('Palette', 'toolSections-DiagramToolSection');
     cy.getByTestId('Tool Section').click();
     cy.getByTestId('Name').type('{selectAll}section1');
-    cy.createChildObject('DiagramPalette', 'Diagram Tool Section');
+    cy.createChildObject('Palette', 'toolSections-DiagramToolSection');
     cy.getByTestId('Tool Section').click();
     cy.getByTestId('Name').type('{selectAll}section2');
-    cy.createChildObject('section1', 'Node Tool');
+    cy.createChildObject('section1', 'nodeTools-NodeTool');
     cy.getByTestId('Tool').click();
     cy.getByTestId('Name').type('{selectAll}tool1_section1');
-    cy.createChildObject('section1', 'Node Tool');
+    cy.createChildObject('section1', 'nodeTools-NodeTool');
     cy.getByTestId('Tool').click();
     cy.getByTestId('Name').type('{selectAll}tool2_section1');
-    cy.createChildObject('section2', 'Node Tool');
+    cy.createChildObject('section2', 'nodeTools-NodeTool');
     cy.getByTestId('Tool').click();
     cy.getByTestId('Name').type('{selectAll}tool1_section2');
-    cy.createChildObject('section2', 'Node Tool');
+    cy.createChildObject('section2', 'nodeTools-NodeTool');
     cy.getByTestId('Tool').click();
     cy.getByTestId('Name').type('{selectAll}tool2_section2');
 
@@ -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/diagram-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/diagram-label.cy.ts
@@ -45,18 +45,18 @@ describe('Diagram - inside outside labels', () => {
             explorer.expand('Entity1 Node');
             explorer.select('aql:self.name');
             details.getTextField('Label Expression').type('{selectAll}InsideLabelNode1{enter}');
-            explorer.createObject('Entity1 Node', 'Outside Label Description');
+            explorer.createObject('Entity1 Node', 'outsideLabels-OutsideLabelDescription');
             explorer.select('aql:self.name');
             details.getTextField('Label Expression').type('{selectAll}OutsideLabelNode1{enter}');
             explorer.collapse('Entity1 Node');
             explorer.expand('Entity2 Node');
             explorer.select('aql:self.name');
             details.getTextField('Label Expression').type('{selectAll}InsideLabelNode2{enter}');
-            explorer.createObject('Entity2 Node', 'Outside Label Description');
+            explorer.createObject('Entity2 Node', 'outsideLabels-OutsideLabelDescription');
             explorer.select('aql:self.name');
             details.getTextField('Label Expression').type('{selectAll}OutsideLabelNode2{enter}');
-            explorer.delete('RectangularNodeStyleDescription');
-            explorer.createObject('Entity2 Node', 'Style Image');
+            explorer.delete('Rectangular Node Style Description 3');
+            explorer.createObject('Entity2 Node', 'style-ImageNodeStyleDescription');
             details.selectValue('Shape', 'camera');
           });
         }
@@ -81,8 +81,8 @@ describe('Diagram - inside outside labels', () => {
       it('Then inside and outside label are display for both nodes', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
-        explorer.createObject('Root', 'Entity1s Entity1');
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity1s-Entity1');
+        explorer.createObject('Root', 'entity2s-Entity2');
 
         diagram.getNodes('diagram', 'InsideLabelNode1').findByTestId('Label - InsideLabelNode1').should('exist');
         diagram.getNodes('diagram', 'InsideLabelNode1').findByTestId('Label - OutsideLabelNode1').should('exist');
@@ -140,7 +140,7 @@ describe('Diagram - inside outside labels', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('small{enter}');
         diagram.fitToScreen();
         let initialWidth: number;
@@ -218,7 +218,7 @@ describe('Diagram - inside outside labels', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('small{enter}');
         diagram.fitToScreen();
         let initialWidth: number;
@@ -298,7 +298,7 @@ describe('Diagram - inside outside labels', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('small{enter}');
         diagram.fitToScreen();
         let initialWidth: number;
@@ -348,7 +348,7 @@ describe('Diagram - inside outside labels', () => {
             explorer.expand(`${domainName} Diagram Description`);
             explorer.expand('Entity1 Node');
             explorer.delete('aql:self.name');
-            explorer.createObject('Entity1 Node', 'Outside Label Description');
+            explorer.createObject('Entity1 Node', 'outsideLabels-OutsideLabelDescription');
           });
         }
       });
@@ -373,7 +373,7 @@ describe('Diagram - inside outside labels', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('small{enter}');
         diagram.fitToScreen();
         let initialWidth: number;