From 8472c28ec0e05caed0cb7ea57e55baf2ad4cffa8 Mon Sep 17 00:00:00 2001 From: Curry Yang <163384738+CurryYangxx@users.noreply.github.com> Date: Wed, 24 Jul 2024 21:51:48 +0800 Subject: [PATCH] fix: reduce uncessary navigate when switching requests and tests (#7748) * fix: reduce uncessary navigate * fix: smoke test * remove onSingleClick function * remove extra test comments --------- Co-authored-by: gatzjames --- .../tests/smoke/grpc-interactions.test.ts | 2 +- .../src/ui/components/editable-input.tsx | 47 +++---------------- .../workspace-environments-edit-modal.tsx | 6 --- packages/insomnia/src/ui/routes/debug.tsx | 22 --------- .../insomnia/src/ui/routes/environments.tsx | 6 --- .../insomnia/src/ui/routes/mock-server.tsx | 5 -- packages/insomnia/src/ui/routes/unit-test.tsx | 5 -- 7 files changed, 8 insertions(+), 85 deletions(-) diff --git a/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts index 24a99b954f..6e4933d814 100644 --- a/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts @@ -30,7 +30,7 @@ test.describe('gRPC interactions', () => { }); test('can send unidirectional requests', async ({ page }) => { - await page.getByLabel('Request Collection').getByText('Unary', { exact: true }).click(); + await page.getByLabel('Request Collection').getByTestId('Unary').click(); await page.locator('[data-testid="request-pane"] >> text=Unary').click(); await page.click('text=Send'); diff --git a/packages/insomnia/src/ui/components/editable-input.tsx b/packages/insomnia/src/ui/components/editable-input.tsx index 7d9bc89eb4..90ce4b5753 100644 --- a/packages/insomnia/src/ui/components/editable-input.tsx +++ b/packages/insomnia/src/ui/components/editable-input.tsx @@ -9,7 +9,6 @@ export const EditableInput = ({ name, className, onSubmit, - onSingleClick, onEditableChange, }: { value: string; @@ -19,7 +18,6 @@ export const EditableInput = ({ name?: string; className?: string; onSubmit: (value: string) => void; - onSingleClick?: () => void; }) => { const [isEditable, setIsEditable] = useState(editable); const editableRef = useRef(null); @@ -55,45 +53,13 @@ export const EditableInput = ({ }; }, [isEditable]); - useEffect(() => { - const editableElement = editableRef.current; - if (editableElement) { - let clickTimeout: ReturnType | null = null; - function onClick(e: MouseEvent) { - e.stopPropagation(); - e.preventDefault(); - if (clickTimeout !== null) { - clearTimeout(clickTimeout); - } - // If timeout passes fire the single click - // else prevent the single click and fire the double click - clickTimeout = setTimeout(() => { - onSingleClick?.(); - }, 200); - } - editableElement.addEventListener('click', onClick); + function onDoubleClick(e: React.MouseEvent) { + e.stopPropagation(); + e.preventDefault(); - function onDoubleClick(e: MouseEvent) { - e.stopPropagation(); - e.preventDefault(); - if (clickTimeout !== null) { - clearTimeout(clickTimeout); - clickTimeout = null; - } - setIsEditable(true); - onEditableChange?.(true); - } - - editableElement.addEventListener('dblclick', onDoubleClick); - - return () => { - editableElement.removeEventListener('click', onClick); - editableElement.removeEventListener('dblclick', onDoubleClick); - }; - } - - return () => { }; - }, [onEditableChange, onSingleClick]); + setIsEditable(true); + onEditableChange?.(true); + } return ( <> @@ -105,6 +71,7 @@ export const EditableInput = ({ ${className || 'px-2'} ` } + onDoubleClick={onDoubleClick} data-editable aria-label={ariaLabel} > diff --git a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx index d1e758ec68..9703c33fd7 100644 --- a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx +++ b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx @@ -286,9 +286,6 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: { name="name" ariaLabel="Environment name" className="px-1 flex-1" - onSingleClick={() => { - setSelectedEnvironmentId(item._id); - }} onSubmit={name => { name && updateEnvironmentFetcher.submit({ patch: { @@ -390,9 +387,6 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: { name="name" ariaLabel="Environment name" className="px-1 flex-1" - onSingleClick={() => { - setSelectedEnvironmentId(selectedEnvironmentId); - }} onSubmit={name => { name && updateEnvironmentFetcher.submit({ patch: { diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index b352a58d14..2334ba84f1 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -976,15 +976,6 @@ export const Debug: FC = () => { name="request name" ariaLabel="request name" className="px-1 flex-1" - onSingleClick={() => { - if (item && isRequestGroup(item.doc)) { - navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${item.doc._id}?${searchParams.toString()}`); - } else { - navigate( - `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${item.doc._id}?${searchParams.toString()}` - ); - } - }} onSubmit={name => { if (isRequestGroup(item.doc)) { patchGroup(item.doc._id, { name }); @@ -1167,13 +1158,10 @@ const CollectionGridListItem = ({ activeEnvironment, activeProject, item, - navigate, organizationId, patchGroup, patchRequest, - groupMetaPatcher, projectId, - searchParams, workspaceId, style, }: { @@ -1269,16 +1257,6 @@ const CollectionGridListItem = ({ name="request name" ariaLabel={label} className="px-1 flex-1" - onSingleClick={() => { - if (item && isRequestGroup(item.doc)) { - groupMetaPatcher(item.doc._id, { collapsed: !item.collapsed }); - navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${item.doc._id}?${searchParams.toString()}`); - } else { - navigate( - `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${item.doc._id}?${searchParams.toString()}` - ); - } - }} onSubmit={name => { if (isRequestGroup(item.doc)) { patchGroup(item.doc._id, { name }); diff --git a/packages/insomnia/src/ui/routes/environments.tsx b/packages/insomnia/src/ui/routes/environments.tsx index 9880bc245a..ad3191c616 100644 --- a/packages/insomnia/src/ui/routes/environments.tsx +++ b/packages/insomnia/src/ui/routes/environments.tsx @@ -306,9 +306,6 @@ const Environments = () => { name="name" ariaLabel="Environment name" className="px-1 flex-1" - onSingleClick={() => { - setSelectedEnvironmentId(item._id); - }} onSubmit={name => { name && updateEnvironmentFetcher.submit({ patch: { @@ -414,9 +411,6 @@ const Environments = () => { name="name" ariaLabel="Environment name" className="px-1 flex-1" - onSingleClick={() => { - setSelectedEnvironmentId(selectedEnvironmentId); - }} onSubmit={name => { name && updateEnvironmentFetcher.submit({ patch: { diff --git a/packages/insomnia/src/ui/routes/mock-server.tsx b/packages/insomnia/src/ui/routes/mock-server.tsx index 22ba88adfc..1f8eb3f04a 100644 --- a/packages/insomnia/src/ui/routes/mock-server.tsx +++ b/packages/insomnia/src/ui/routes/mock-server.tsx @@ -282,11 +282,6 @@ const MockServerRoute = () => { value={item.name} name="name" ariaLabel="Mock route name" - onSingleClick={() => { - navigate({ - pathname: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${item._id}`, - }); - }} onSubmit={name => { const hasRouteInServer = mockRoutes.filter(m => m._id !== item._id).find(m => m.name === name); if (hasRouteInServer) { diff --git a/packages/insomnia/src/ui/routes/unit-test.tsx b/packages/insomnia/src/ui/routes/unit-test.tsx index ce74d9f5f3..5845e1d4db 100644 --- a/packages/insomnia/src/ui/routes/unit-test.tsx +++ b/packages/insomnia/src/ui/routes/unit-test.tsx @@ -384,11 +384,6 @@ const TestRoute: FC = () => { name="name" ariaLabel="Test suite name" className='flex-1 px-1' - onSingleClick={() => { - navigate({ - pathname: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${item._id}`, - }); - }} onSubmit={name => { name && updateTestSuiteFetcher.submit( { name },