[3464] Improve i18n support for domain and view forms

Bug: eclipse-sirius#3464
Signed-off-by: Denis Nikiforov <[email protected]>

CHANGELOG.adoc

@@ -155,6 +155,7 @@ They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3391[#3391] [diagram] Accept gradient for node background
 - https://github.com/eclipse-sirius/sirius-web/issues/3435[#3435] [diagram] Extract diagram style from useDropNode
 - https://github.com/eclipse-sirius/sirius-web/issues/3453[#3453] [diagram] Memoizing edges and nodes style
+- https://github.com/eclipse-sirius/sirius-web/issues/3464[#3464] [view] Improve i18n support for domain and view forms
 
 == v2024.3.0
 

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

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('PageDescription');
+        explorer.select('GroupDescription');
+        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');
       });
     });
-
-
   });
 });

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');
@@ -80,8 +80,8 @@ describe('Diagram - collapsible node', () => {
         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();

integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts

@@ -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%');

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.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;

integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts

@@ -69,7 +69,7 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then we cannot perform the direct edition of the node without the direct edit tool', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         explorer.getTreeItemByLabel('Entity1').click();
 
         const details = new Details();
@@ -87,7 +87,7 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then we can perform the edition of the label of the node with the direct edit tool', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         explorer.getTreeItemByLabel('Entity2').click();
 
         const details = new Details();
@@ -105,7 +105,7 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then during edit triggering escape cancelled the current edition', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         explorer.getTreeItemByLabel('Entity2').click();
 
         const details = new Details();
@@ -124,7 +124,7 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then we can set the correct name when typing directly', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         const details = new Details();
         details.getTextField('Name').type('Entity2{Enter}');
 
@@ -135,8 +135,8 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then we can use direct edit on edge', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity1s Entity1');
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity1s-Entity1');
+        explorer.createObject('Root', 'entity2s-Entity2');
         explorer.select('Entity2');
         const details = new Details();
         details.getTextField('Name').type('Entity2');
@@ -155,7 +155,7 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then during the direct edition, the palette is hidden', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         explorer.getTreeItemByLabel('Entity2').click();
 
         const details = new Details();
@@ -223,8 +223,8 @@ describe('Diagram - Direct edit label', () => {
 
       it('Then we can not use direct edit on edge', () => {
         const explorer = new Explorer();
-        explorer.createObject('Root', 'Entity1s Entity1');
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity1s-Entity1');
+        explorer.createObject('Root', 'entity2s-Entity2');
         explorer.select('Entity2');
         const details = new Details();
         details.getTextField('Name').type('Entity2');

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', () => {
@@ -30,7 +30,7 @@ describe('Diagram - edges', () => {
         cy.get('[title="domain::Domain"]').then(($div) => {
           domainName = $div.data().testid;
           explorer.expand(`${domainName}`);
-          explorer.createObject('Entity1', 'Relation');
+          explorer.createObject('Entity1', 'relations-Relation');
           const details = new Details();
           details.getCheckBox('Containment').check();
           details.openReferenceWidgetOptions('Target Type');
@@ -67,9 +67,9 @@ describe('Diagram - edges', () => {
         const details = new Details();
         const diagram = new Diagram();
 
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('Entity1{Enter}');
-        explorer.createObject('Entity1', 'Relation Entity2');
+        explorer.createObject('Entity1', 'relation-Entity2');
 
         details.getTextField('Name').should('have.value', '');
         details.getTextField('Name').type('Entity2{Enter}');
@@ -111,7 +111,7 @@ describe('Diagram - edges', () => {
           details.getTextField('Default Width Expression').type('300{enter}');
           details.getTextField('Default Height Expression').type('50{enter}');
           explorer.delete('RectangularNodeStyleDescription');
-          explorer.createObject('Entity1 Node', 'Ellipse Node Style Description');
+          explorer.createObject('Entity1 Node', 'style-EllipseNodeStyleDescription');
         });
       })
     );
@@ -135,12 +135,12 @@ describe('Diagram - edges', () => {
         const details = new Details();
         const diagram = new Diagram();
 
-        explorer.createObject('Root', 'Entity1s Entity1');
+        explorer.createObject('Root', 'entity1s-Entity1');
         details.getTextField('Name').type('Entity1{Enter}');
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         details.getTextField('Name').should('have.value', '');
         details.getTextField('Name').type('Entity2{Enter}');
-        explorer.createObject('Root', 'Entity2s Entity2');
+        explorer.createObject('Root', 'entity2s-Entity2');
         details.getTextField('Name').should('have.value', '');
         details.getTextField('Name').type('Entity2.bis{Enter}');
         explorer.select('Entity1');