fix: Kong#6334 updating requestgroup caused render error (Kong#6342)

* fix: Kong#6334 updating requestgroup caused render error * add test * fix rename * redirect on move --------- Co-authored-by: jackkav <jackkav@gmail.com>
jackkav · Nov 24, 2023 · 34ac76e · 34ac76e
1 parent 6fa4574
commit 34ac76e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts b/packages/insomnia-smoke-test/tests/prerelease/debug-sidebar-interactions.test.ts
@@ -119,6 +119,15 @@ test.describe('Debug-Sidebar', async () => {
       await page.locator('button:has-text("example http1")').click();
     });
 
+    test('Update a request folder via settings', async ({ page }) => {
+      await page.getByRole('button', { name: 'test folder' }).click();
+      await page.locator('[data-testid="Dropdown-test-folder"] button').click();
+      await page.getByRole('menuitem', { name: 'Settings' }).click();
+      await page.getByPlaceholder('test folder').fill('test folder1');
+      await page.locator('.app').press('Escape');
+      await page.locator('button:has-text("test folder1")').click();
+    });
+
     test('Create a new HTTP request', async ({ page }) => {
       await page.getByRole('button', { name: ' ' }).press('ArrowDown');
       await page.getByRole('menuitem', { name: 'Http Request' }).click();

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
@@ -8,7 +8,7 @@ import type { RequestGroup } from '../../../models/request-group';
 import type { RequestGroupAction } from '../../../plugins';
 import { getRequestGroupActions } from '../../../plugins';
 import * as pluginContexts from '../../../plugins/context/index';
-import { CreateRequestType } from '../../hooks/use-request';
+import { CreateRequestType, useRequestGroupPatcher } from '../../hooks/use-request';
 import { RootLoaderData } from '../../routes/root';
 import { WorkspaceLoaderData } from '../../routes/workspace';
 import { Dropdown, DropdownButton, type DropdownHandle, DropdownItem, type DropdownProps, DropdownSection, ItemContent } from '../base/dropdown';
@@ -92,22 +92,17 @@ export const RequestGroupActionsDropdown = forwardRef<RequestGroupActionsDropdow
         method: 'post',
       }),
   }), [requestFetcher, organizationId, projectId, requestGroup._id, workspaceId]);
-
+  const patchGroup = useRequestGroupPatcher();
   const handleRename = useCallback(() => {
     showPrompt({
       title: 'Rename Folder',
       defaultValue: requestGroup.name,
       submitName: 'Rename',
       selectText: true,
       label: 'Name',
-      onComplete: name => requestFetcher.submit({ _id: requestGroup._id, name },
-        {
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/update`,
-          method: 'post',
-          encType: 'application/json',
-        }),
+      onComplete: name => patchGroup(requestGroup._id, { name }),
     });
-  }, [requestFetcher, organizationId, projectId, requestGroup._id, requestGroup.name, workspaceId]);
+  }, [requestGroup.name, requestGroup._id, patchGroup]);
 
   const handleDeleteFolder = useCallback(async () => {
     models.stats.incrementDeletedRequestsForDescendents(requestGroup);

diff --git a/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { OverlayContainer } from 'react-aria';
-import { useFetcher, useParams } from 'react-router-dom';
+import { useFetcher, useNavigate, useParams } from 'react-router-dom';
 
 import type { RequestGroup } from '../../../models/request-group';
 import { invariant } from '../../../utils/invariant';
@@ -53,11 +53,12 @@ export const RequestGroupSettingsModal = ({ requestGroup, onHide }: ModalProps &
   useEffect(() => {
     modalRef.current?.show();
   }, []);
-
+  const navigate = useNavigate();
   const handleMoveToWorkspace = async () => {
     invariant(state.activeWorkspaceIdToCopyTo, 'Workspace ID is required');
     patchRequestGroup(requestGroup._id, { parentId: state.activeWorkspaceIdToCopyTo });
     modalRef.current?.hide();
+    navigate(`/organization/${organizationId}/project/${projectId}/workspace/${state.activeWorkspaceIdToCopyTo}/debug`);
   };
 
   const handleCopyToWorkspace = async () => {

diff --git a/packages/insomnia/src/ui/index.tsx b/packages/insomnia/src/ui/index.tsx
@@ -195,7 +195,7 @@ const router = createMemoryRouter(
                                   action: async (...args) => (await import('./routes/request-group')).deleteRequestGroupAction(...args),
                                 },
                                 {
-                                  path: 'request-group/update',
+                                  path: 'request-group/:requestGroupId/update',
                                   action: async (...args) => (await import('./routes/request-group')).updateRequestGroupAction(...args),
                                 },
                                 {

diff --git a/packages/insomnia/src/ui/routes/request-group.tsx b/packages/insomnia/src/ui/routes/request-group.tsx
@@ -14,11 +14,12 @@ export const createRequestGroupAction: ActionFunction = async ({ request, params
   models.requestGroupMeta.create({ parentId: requestGroup._id, collapsed: false });
   return null;
 };
-export const updateRequestGroupAction: ActionFunction = async ({ request }) => {
-  const patch = await request.json() as RequestGroup;
-  invariant(typeof patch._id === 'string', 'Request Group ID is required');
-  const reqGroup = await models.requestGroup.getById(patch._id);
+export const updateRequestGroupAction: ActionFunction = async ({ request, params }) => {
+  const { requestGroupId } = params;
+  invariant(typeof requestGroupId === 'string', 'Request Group ID is required');
+  const reqGroup = await models.requestGroup.getById(requestGroupId);
   invariant(reqGroup, 'Request Group not found');
+  const patch = await request.json() as RequestGroup;
   models.requestGroup.update(reqGroup, patch);
   return null;
 };