[3089] Add Confirmation Dialog on delete

Bug: #3089 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Feb 13, 2024 · 211a3b5 · 211a3b5
1 parent 5e748ac
commit 211a3b5
Show file tree

Hide file tree

Showing 36 changed files with 782 additions and 143 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -81,6 +81,9 @@ image:doc/screenshots/deploymenDiagram.png[Deployment Diagram,70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/2841[#2841] [diagram] Add the support for read-only diagram.
 In read-only mode, the palette can not be displayed, some of the panel action are disabled, a node cannot be moved or be resized.
 - https://github.com/eclipse-sirius/sirius-web/issues/3042[#3042] [core] IObjectService have been divided in smaller services IContentService, IObjectSearchService, IIdentityService and ILabelService, see the related ADR for more details.
+- https://github.com/eclipse-sirius/sirius-web/issues/3089[#3089] [sirius-web] Add confirmation dialog on delete.
++
+image:doc/screenshots/showDeletionConfirmation.png[Deletion Confirmation Dialog,70%]
 
 === Improvements
 

diff --git a/doc/screenshots/showDeletionConfirmation.png b/doc/screenshots/showDeletionConfirmation.png
diff --git a/...s/e2e/project/diagrams/custom-shape.cy.js → ...s/e2e/project/diagrams/custom-shape.cy.ts b/...s/e2e/project/diagrams/custom-shape.cy.js → ...s/e2e/project/diagrams/custom-shape.cy.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -10,12 +10,16 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { Project } from '../../../pages/Project';
+import { Studio } from '../../../usecases/Studio';
+
 describe('/projects/:projectId/edit - Custom Shape', () => {
   beforeEach(() => {
     cy.deleteAllProjects();
-    cy.createProjectFromTemplate('studio-template').then((res) => {
-      const projectId = res.body.data.createProjectFromTemplate.project.id;
-      cy.visit(`/projects/${projectId}/edit`);
+    new Studio().createStudioProject().then((createdProjectData) => {
+      const project = new Project();
+      project.visit(createdProjectData.projectId);
+      project.disableDeletionConfirmationDialog();
     });
   });
 
@@ -63,7 +67,6 @@ describe('/projects/:projectId/edit - Custom Shape', () => {
     cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
     cy.getByTestId('representationDescription').click();
     cy.get('[data-testid$=" Diagram Description"]').should('exist').click();
-    cy.getByTestId('name').clear().type('diagram__REACT_FLOW');
     cy.getByTestId('create-representation').click();
 
     cy.getByTestId('Root-more').click();

diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram-context-menu.cy.js b/integration-tests/cypress/e2e/project/diagrams/diagram-context-menu.cy.js
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -37,6 +37,16 @@ describe('/projects/:projectId/edit - Diagram Context Menu', () => {
     cy.getByTestId('diagram-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
 
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-cancel').click();
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+
+    cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
     cy.getByTestId('diagram').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 });
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
@@ -49,11 +49,11 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
 
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('Topography__REACT_FLOW');
+    cy.getByTestId('name').type('Topography');
     cy.getByTestId('representationDescription').click();
     cy.getByTestId('Topography with auto layout').click();
     cy.getByTestId('create-representation').click();
-    cy.getByTestId('Topography__REACT_FLOW').click();
+    cy.getByTestId('Topography').click();
   };
 
   beforeEach(() => {
@@ -75,8 +75,8 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
   it.skip('can fade any type of nodes', () => {
     createFlowReactFlowDiagram();
     fadeByElementTestId('IconLabel - Temperature: 25');
-    fadeByElementTestId('Image - Motion_Engine');
-    fadeByElementTestId('Rectangle - Central_Unit');
+    fadeByElementTestId('FreeForm - Motion_Engine');
+    fadeByElementTestId('FreeForm - Central_Unit');
     fadeByElementTestId('List - Description');
   });
 
@@ -89,9 +89,9 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('form').findByTestId('Temperature').type('{selectall}').type('25').type('{enter}');
     cy.getByTestId('Label - Temperature: 25').should('have.length', 2);
     hideByElementTestId('Label - Temperature: 25');
-    hideByElementTestId('Image - Motion_Engine');
+    hideByElementTestId('FreeForm - Motion_Engine');
     hideByElementTestId('List - Description');
-    hideByElementTestId('Rectangle - Central_Unit');
+    hideByElementTestId('FreeForm - Central_Unit');
   });
 
   it('can not open multi tool section in the same time', () => {
@@ -147,7 +147,7 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('Root-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('__REACT_FLOW');
+    cy.getByTestId('name').type('my new diagram');
     cy.getByTestId('representationDescription').click();
     cy.getByTestId('Diagram Description').click();
     cy.getByTestId('create-representation').click();
@@ -179,12 +179,12 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
       cy.visit(`/projects/${projectId}/edit`);
     });
 
-    // Rename the diagram switch it to React Flow
+    // Rename the diagram
     cy.getByTestId('onboard-open-Domain').click();
     cy.getByTestId('Domain').click();
     cy.getByTestId('Domain-more').click();
     cy.getByTestId('rename-tree-item').click();
-    cy.getByTestId('name-edit').type('Domain__REACT_FLOW{enter}');
+    cy.getByTestId('name-edit').type('Domain{enter}');
 
     // Open the palette of the "Root" entity.
     cy.getByTestId('rf__wrapper').findByTestId('Label - Root').click();
@@ -214,12 +214,12 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
       cy.visit(`/projects/${projectId}/edit`);
     });
 
-    // Rename the diagram switch it to React Flow
+    // Rename the diagram
     cy.getByTestId('onboard-open-Domain').click();
     cy.getByTestId('Domain').click();
     cy.getByTestId('Domain-more').click();
     cy.getByTestId('rename-tree-item').click();
-    cy.getByTestId('name-edit').type('Domain__REACT_FLOW{enter}');
+    cy.getByTestId('name-edit').type('Domain{enter}');
 
     cy.getByTestId('rf__wrapper').click(100, 100);
     cy.getByTestId('Palette').should('exist');
@@ -234,16 +234,34 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
       cy.visit(`/projects/${projectId}/edit`);
     });
 
-    // Rename the diagram switch it to React Flow
+    // Rename the diagram
     cy.getByTestId('onboard-open-Domain').click();
     cy.getByTestId('Domain').click();
     cy.getByTestId('Domain-more').click();
     cy.getByTestId('rename-tree-item').click();
-    cy.getByTestId('name-edit').type('Domain__REACT_FLOW{enter}');
+    cy.getByTestId('name-edit').type('Domain{enter}');
 
     cy.getByTestId('rf__wrapper').findByTestId('Label - Root').click();
     cy.getByTestId('Palette').should('exist');
     cy.get('body').type('{esc}');
     cy.getByTestId('Palette').should('not.exist');
   });
+
+  it('semantic delete tool with confirmation dialog', () => {
+    createFlowReactFlowDiagram();
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').should('exist').click();
+    cy.getByTestId('Delete from model - Tool').should('exist').click();
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-cancel').click();
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+
+    cy.getByTestId('Delete from model - Tool').should('exist').click();
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+  });
 });
diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram.reactflow.cy.js b/integration-tests/cypress/e2e/project/diagrams/diagram.reactflow.cy.js
@@ -30,7 +30,7 @@ describe('/projects/:projectId/edit - Diagram', () => {
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
 
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('Topography1__REACT_FLOW');
+    cy.getByTestId('name').type('Topography1');
     cy.getByTestId('representationDescription').click();
     cy.getByTestId('Topography with auto layout').click();
     cy.getByTestId('create-representation').click();
@@ -52,7 +52,7 @@ describe('/projects/:projectId/edit - Diagram', () => {
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
 
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('Topography1__REACT_FLOW');
+    cy.getByTestId('name').type('Topography1');
     cy.getByTestId('representationDescription').click();
     cy.getByTestId('Topography with auto layout').click();
     cy.getByTestId('create-representation').click();
@@ -78,28 +78,58 @@ describe('/projects/:projectId/edit - Diagram', () => {
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
 
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('Topography1__REACT_FLOW');
+    cy.getByTestId('name').type('Topography1');
     cy.getByTestId('create-representation').click();
 
     cy.getByTestId('Robot-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
 
     cy.getByTestId('name').clear();
-    cy.getByTestId('name').type('Topography2__REACT_FLOW');
+    cy.getByTestId('name').type('Topography2');
     cy.getByTestId('create-representation').click();
 
-    cy.getByTestId('Topography1__REACT_FLOW').click();
+    cy.getByTestId('Topography1').click();
 
-    cy.getByTestId('representation-tab-Topography1__REACT_FLOW').should('have.attr', 'data-testselected', 'true');
-    cy.getByTestId('representation-tab-Topography2__REACT_FLOW').should('have.attr', 'data-testselected', 'false');
+    cy.getByTestId('representation-tab-Topography1').should('have.attr', 'data-testselected', 'true');
+    cy.getByTestId('representation-tab-Topography2').should('have.attr', 'data-testselected', 'false');
 
-    cy.getByTestId('Topography2__REACT_FLOW').click();
-    cy.getByTestId('representation-tab-Topography1__REACT_FLOW').should('have.attr', 'data-testselected', 'false');
-    cy.getByTestId('representation-tab-Topography2__REACT_FLOW').should('have.attr', 'data-testselected', 'true');
+    cy.getByTestId('Topography2').click();
+    cy.getByTestId('representation-tab-Topography1').should('have.attr', 'data-testselected', 'false');
+    cy.getByTestId('representation-tab-Topography2').should('have.attr', 'data-testselected', 'true');
 
-    cy.getByTestId('representation-tab-Topography1__REACT_FLOW').click();
+    cy.getByTestId('representation-tab-Topography1').click();
 
-    cy.getByTestId('representation-tab-Topography1__REACT_FLOW').should('have.attr', 'data-testselected', 'true');
-    cy.getByTestId('representation-tab-Topography2__REACT_FLOW').should('have.attr', 'data-testselected', 'false');
+    cy.getByTestId('representation-tab-Topography1').should('have.attr', 'data-testselected', 'true');
+    cy.getByTestId('representation-tab-Topography2').should('have.attr', 'data-testselected', 'false');
+  });
+
+  it('can delete element with DEL key', () => {
+    cy.getByTestId('robot').dblclick();
+    cy.getByTestId('Robot').dblclick();
+    cy.getByTestId('Robot-more').click();
+
+    cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
+
+    cy.getByTestId('name').clear();
+    cy.getByTestId('name').type('Topography1');
+    cy.getByTestId('representationDescription').click();
+    cy.getByTestId('Topography').click();
+    cy.getByTestId('create-representation').click();
+
+    cy.getByTestId('rf__wrapper').should('exist');
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').should('exist').click();
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').type('{del}');
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-cancel').click();
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').type('{del}');
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
+    cy.getByTestId('rf__wrapper').findByTestId('FreeForm - Wifi').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 });
diff --git a/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts
@@ -30,7 +30,9 @@ describe('Diagram - Direct edit label', () => {
           const projectId = payload.project.id;
           studioProjectId = projectId;
 
-          new Project().visit(projectId);
+          const project = new Project();
+          project.visit(projectId);
+          project.disableDeletionConfirmationDialog();
 
           const explorer = new Explorer();
           explorer.getTreeItemByLabel('DomainNewModel').dblclick();
@@ -163,7 +165,9 @@ describe('Diagram - Direct edit label', () => {
           const projectId = payload.project.id;
           studioProjectId = projectId;
 
-          new Project().visit(projectId);
+          const project = new Project();
+          project.visit(projectId);
+          project.disableDeletionConfirmationDialog();
 
           const explorer = new Explorer();
           explorer.getTreeItemByLabel('DomainNewModel').dblclick();

diff --git a/integration-tests/cypress/e2e/project/explorer/document-context-menu.cy.js b/integration-tests/cypress/e2e/project/explorer/document-context-menu.cy.js
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,7 +16,7 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
     cy.createProject('Cypress Project').then((res) => {
       const projectId = res.body.data.createProject.project.id;
       const robot_flow_id = 'c26b6086-b444-3ee6-b8cd-9a4fde5956a7';
-      cy.createDocument(projectId, robot_flow_id, 'robot').then((_res) => {
+      cy.createDocument(projectId, robot_flow_id, 'robot').then(() => {
         cy.visit(`/projects/${projectId}/edit`);
       });
     });
@@ -69,8 +69,18 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
     cy.getByTestId('robot-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
 
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-cancel').click();
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+
+    cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
     cy.getByTestId('treeitem-contextmenu').should('not.exist');
     cy.getByTestId('robot').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 
   it('can rename a document', () => {
@@ -143,10 +153,16 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
     cy.getByTestId('Robot').dblclick();
     cy.getByTestId('Central_Unit-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
     cy.getByTestId('CaptureSubSystem-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
     cy.getByTestId('Wifi-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
 
     cy.getByTestId('robot').should('exist');
     cy.getByTestId('Robot').should('exist');

diff --git a/integration-tests/cypress/e2e/project/explorer/explorer-filterbar.cy.js b/integration-tests/cypress/e2e/project/explorer/explorer-filterbar.cy.js
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -158,10 +158,16 @@ describe('/projects/:projectId/edit - Tree filter bar', () => {
     cy.getByTestId('Robot').dblclick();
     cy.getByTestId('Central_Unit-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
     cy.getByTestId('CaptureSubSystem-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
     cy.getByTestId('Wifi-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
 
     cy.getByTestId('flow').click().type('{ctrl+f}');
 

diff --git a/integration-tests/cypress/e2e/project/explorer/object-context-menu.cy.js b/integration-tests/cypress/e2e/project/explorer/object-context-menu.cy.js
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -50,7 +50,17 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
     cy.getByTestId('Robot-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
 
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-cancel').click();
+    cy.getByTestId('confirmation-dialog').should('not.exist');
+
+    cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
     cy.getByTestId('Robot').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 
   it('can open the new object modal', () => {