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 <jamesgatzos@gmail.com>
2026-04-21 14:47:46 -04:00 · 2024-07-24 21:51:48 +08:00
parent c1cd04f4dc
commit 8472c28ec0
7 changed files with 8 additions and 85 deletions
--- 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');

--- 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<HTMLDivElement>(null);
@@ -55,45 +53,13 @@ export const EditableInput = ({
    };
  }, [isEditable]);

-  useEffect(() => {
-    const editableElement = editableRef.current;
-    if (editableElement) {
-      let clickTimeout: ReturnType<typeof setTimeout> | 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<HTMLDivElement, 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}
      >
--- 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: {
--- 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 });
--- 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: {
--- 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) {
--- 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 },