feat: ask before deleting request and folder [INS-3358] (#6845)

* feat: ask modal delete request & folder [INS-3358] * fix smoke test
Kong · Nov 22, 2023 · 7ebfb3c · 7ebfb3c
1 parent 867567a
commit 7ebfb3c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts
@@ -106,6 +106,7 @@ test.describe('Debug-Sidebar', async () => {
       await requestLocator.click();
       await requestLocator.getByLabel('Request Actions').click();
       await page.getByRole('menuitemradio', { name: 'Delete' }).click();
+      await page.locator('.modal__content').getByRole('button', { name: 'Delete' }).click();
       await expect(page.locator('.app')).not.toContainText('example http');
     });
 

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
@@ -23,6 +23,7 @@ import { useRootLoaderData } from '../../routes/root';
 import { Icon } from '../icon';
 import { showError, showModal, showPrompt } from '../modals';
 import { AlertModal } from '../modals/alert-modal';
+import { AskModal } from '../modals/ask-modal';
 import { GenerateCodeModal } from '../modals/generate-code-modal';
 import { RequestSettingsModal } from '../modals/request-settings-modal';
 
@@ -140,12 +141,22 @@ export const RequestActionsDropdown = ({
   };
 
   const deleteRequest = () => {
-    incrementDeletedRequests();
-    requestFetcher.submit({ id: request._id },
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/delete`,
-        method: 'post',
-      });
+    showModal(AskModal, {
+      title: 'Delete Request',
+      message: `Do you really want to delete "${request.name}"?`,
+      yesText: 'Delete',
+      noText: 'Cancel',
+      onDone: async (isYes: boolean) => {
+        if (isYes) {
+          incrementDeletedRequests();
+          requestFetcher.submit({ id: request._id },
+            {
+              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/delete`,
+              method: 'post',
+            });
+        }
+      },
+    });
   };
 
   // Can only generate code for regular requests, not gRPC requests

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
@@ -18,6 +18,7 @@ import { WorkspaceLoaderData } from '../../routes/workspace';
 import { type DropdownHandle, type DropdownProps } from '../base/dropdown';
 import { Icon } from '../icon';
 import { showError, showModal, showPrompt } from '../modals';
+import { AskModal } from '../modals/ask-modal';
 import { EnvironmentEditModal } from '../modals/environment-edit-modal';
 import { PasteCurlModal } from '../modals/paste-curl-modal';
 import { RequestGroupSettingsModal } from '../modals/request-group-settings-modal';
@@ -86,12 +87,22 @@ export const RequestGroupActionsDropdown = ({
   };
 
   const handleDeleteFolder = async () => {
-    models.stats.incrementDeletedRequestsForDescendents(requestGroup);
-    requestFetcher.submit({ id: requestGroup._id },
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/delete`,
-        method: 'post',
-      });
+    showModal(AskModal, {
+      title: 'Delete Folder',
+      message: `Do you really want to delete "${requestGroup.name}"?`,
+      yesText: 'Delete',
+      noText: 'Cancel',
+      onDone: async (isYes: boolean) => {
+        if (isYes) {
+          models.stats.incrementDeletedRequestsForDescendents(requestGroup);
+          requestFetcher.submit({ id: requestGroup._id },
+            {
+              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/delete`,
+              method: 'post',
+            });
+        }
+      },
+    });
   };
 
   const handlePluginClick = async ({ label, plugin, action }: RequestGroupAction) => {