[3089] Add Confirmation Dialog on delete

Bug: #3089 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Feb 9, 2024 · 9dcf338 · 9dcf338
1 parent 11c7297
commit 9dcf338
Show file tree

Hide file tree

Showing 26 changed files with 674 additions and 123 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -64,6 +64,9 @@ image:doc/screenshots/deploymenDiagram.png[Deployment Diagram,70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3015[#3015] [deck] Add the Lane Selection and Direct edit capability.
 - https://github.com/eclipse-sirius/sirius-web/issues/3033[#3033] [deck] Add the Lane Drag and Drop capability.
 - https://github.com/eclipse-sirius/sirius-web/issues/2606[#2606] [diagram] Add the possibility to insert free space before or after elements in list layouted node
+- 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/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(() => {
@@ -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('Image - 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('Image - 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();
@@ -53,7 +53,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();
@@ -79,28 +79,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('Image - Wifi').should('exist').click();
+    cy.getByTestId('rf__wrapper').findByTestId('Image - 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('Image - Wifi').type('{del}');
+
+    cy.getByTestId('confirmation-dialog').should('be.visible');
+    cy.getByTestId('confirmation-dialog-button-ok').click();
+
+    cy.getByTestId('rf__wrapper').findByTestId('Image - Wifi').should('not.exist');
+    cy.getByTestId('confirmation-dialog').should('not.exist');
   });
 });
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
@@ -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', () => {

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', () => {

diff --git a/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts b/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts
@@ -11,13 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { Project } from '../../../pages/Project';
+import { isCreateProjectFromTemplateSuccessPayload } from '../../../support/server/createProjectFromTemplateCommand';
+import { Flow } from '../../../usecases/Flow';
 import { Studio } from '../../../usecases/Studio';
-import { Explorer } from '../../../workbench/Explorer';
 import { Details } from '../../../workbench/Details';
-import { Flow } from '../../../usecases/Flow';
-import { Project } from '../../../pages/Project';
+import { Explorer } from '../../../workbench/Explorer';
 import { Form } from '../../../workbench/Form';
-import { isCreateProjectFromTemplateSuccessPayload } from '../../../support/server/createProjectFromTemplateCommand';
 
 const createFormWithWidgetRef = (domainType: string, name: string, reference: string) => {
   const explorer = new Explorer();
@@ -159,6 +159,39 @@ describe('Forms Widget-reference', () => {
         form.getWidget('Test Widget Reference').should('exist');
         form.getWidgetElement('Test Widget Reference', 'Test Widget Reference-add').should('exist');
         explorer.getTreeItemByLabel('1000').should('not.exist');
+
+        form.getWidgetElement('Test Widget Reference', 'Test Widget Reference-add').click();
+        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').click();
+        cy.getByTestId('childCreationDescription').get('[data-value]').should('have.length', 1);
+        cy.getByTestId('childCreationDescription').get('[data-value="Power Output"]').should('exist').click();
+        cy.getByTestId('create-modal').findByTestId('create-object').click();
+        cy.getByTestId('reference-value-1000').should('exist');
+        explorer.getTreeItemByLabel('1000').should('exist');
+
+        // click on the delete icon on the Chip
+        cy.get('.MuiChip-deleteIcon').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('reference-value-1000').should('exist');
+        cy.get('.MuiChip-deleteIcon').should('exist').click();
+
+        cy.getByTestId('confirmation-dialog').should('be.visible');
+        cy.getByTestId('confirmation-dialog-button-ok').click();
+        cy.getByTestId('confirmation-dialog').should('not.exist');
+
+        cy.getByTestId('reference-value-1000').should('not.exist');
+        explorer.getTreeItemByLabel('1000').should('not.exist');
+
         form.getWidgetElement('Test Widget Reference', 'Test Widget Reference-add').click();
         cy.getByTestId('create-modal').should('exist');
         cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist');
@@ -173,6 +206,23 @@ describe('Forms Widget-reference', () => {
         cy.getByTestId('create-modal').findByTestId('create-object').click();
         cy.getByTestId('reference-value-1000').should('exist');
         explorer.getTreeItemByLabel('1000').should('exist');
+
+        // click on the delete icon on the Widget Reference
+        form.getWidgetElement('Test Widget Reference', 'Test Widget Reference-clear').click();
+
+        cy.getByTestId('confirmation-dialog').should('be.visible');
+        cy.getByTestId('confirmation-dialog-button-cancel').click();
+        cy.getByTestId('confirmation-dialog').should('not.exist');
+
+        cy.getByTestId('reference-value-1000').should('exist');
+        form.getWidgetElement('Test Widget Reference', 'Test Widget Reference-clear').click();
+
+        cy.getByTestId('confirmation-dialog').should('be.visible');
+        cy.getByTestId('confirmation-dialog-button-ok').click();
+        cy.getByTestId('confirmation-dialog').should('not.exist');
+
+        cy.getByTestId('reference-value-1000').should('not.exist');
+        explorer.getTreeItemByLabel('1000').should('not.exist');
       });
 
       it('Then widget reference non containment is available', () => {

diff --git a/integration-tests/cypress/e2e/project/portals/portals.cy.ts b/integration-tests/cypress/e2e/project/portals/portals.cy.ts
@@ -64,6 +64,17 @@ describe('/projects/:projectId/edit - Portal', () => {
         portal.getPortal().should('be.visible');
         const explorer = new Explorer();
         explorer.delete('Portal');
+
+        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('confirmation-dialog').should('not.exist');
+
         portal.getPortal().should('not.exist');
       });
 
@@ -229,6 +240,11 @@ describe('/projects/:projectId/edit - Portal', () => {
           portal.addRepresentationFromExplorer('Portal', diagramTitle);
           const explorer = new Explorer();
           explorer.delete(diagramTitle);
+
+          cy.getByTestId('confirmation-dialog').should('be.visible');
+          cy.getByTestId('confirmation-dialog-button-ok').click();
+          cy.getByTestId('confirmation-dialog').should('not.exist');
+
           explorer.getTreeItemByLabel('Portal').click();
 
           portal.getFrame(diagramTitle).should('not.exist');

diff --git a/packages/core/frontend/sirius-components-core/src/index.ts b/packages/core/frontend/sirius-components-core/src/index.ts
@@ -33,6 +33,10 @@ export { useData } from './extension/useData';
 export * from './graphql/GQLTypes.types';
 export * from './icon/IconOverlay';
 export * from './materialui';
+export * from './modals/confirmation/ConfirmationDialogContext';
+export * from './modals/confirmation/ConfirmationDialogContext.types';
+export * from './modals/confirmation/useConfirmationDialog';
+export * from './modals/confirmation/useConfirmationDialog.types';
 export * from './modals/share-representation/ShareRepresentationModal';
 export * from './modals/share-representation/ShareRepresentationModal.types';
 export * from './selection/SelectionContext';