From 0fd09db6e469c56edca308faf463c1dd8e398c43 Mon Sep 17 00:00:00 2001 From: allx Date: Mon, 29 Jan 2024 21:36:01 +0200 Subject: [PATCH 1/3] Implement request rename on double click --- packages/insomnia/src/ui/routes/debug.tsx | 39 ++++++++++++++++++++--- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index 5167c6472..f75ba4121 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -1,7 +1,7 @@ import { IconName } from '@fortawesome/fontawesome-svg-core'; import { ServiceError, StatusObject } from '@grpc/grpc-js'; import { useVirtualizer } from '@tanstack/react-virtual'; -import React, { FC, Fragment, useEffect, useRef, useState } from 'react'; +import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from 'react'; import { Button, DropIndicator, @@ -79,6 +79,7 @@ import { CreateRequestType, useRequestGroupMetaPatcher, useRequestMetaPatcher, + useRequestSetter, } from '../hooks/use-request'; import { GrpcRequestLoaderData, @@ -186,6 +187,8 @@ export const Debug: FC = () => { const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false); const patchRequestMeta = useRequestMetaPatcher(); + const patchRequest = useRequestSetter(); + useEffect(() => { db.onChange(async (changes: ChangeBufferEvent[]) => { for (const change of changes) { @@ -617,7 +620,7 @@ export const Debug: FC = () => { const virtualizer = useVirtualizer({ getScrollElement: () => parentRef.current, count: visibleCollection.length, - estimateSize: React.useCallback(() => 32, []), + estimateSize: useCallback(() => 32, []), overscan: 30, getItemKey: index => visibleCollection[index].doc._id, }); @@ -890,7 +893,21 @@ export const Debug: FC = () => { gRPC )} - {getRequestNameOrFallback(item.doc)} + { + showPrompt({ + title: 'Rename Request', + defaultValue: item.doc.name, + submitName: 'Rename', + selectText: true, + label: 'Name', + onComplete: name => patchRequest(item.doc._id, { name }), + }); + }} + > + {getRequestNameOrFallback(item.doc)} + {item.pinned && ( @@ -977,7 +994,21 @@ export const Debug: FC = () => { icon={item.collapsed ? 'folder' : 'folder-open'} /> )} - {getRequestNameOrFallback(item.doc)} + { + showPrompt({ + title: 'Rename Request', + defaultValue: item.doc.name, + submitName: 'Rename', + selectText: true, + label: 'Name', + onComplete: name => patchRequest(item.doc._id, { name }), + }); + }} + > + {getRequestNameOrFallback(item.doc)} + {isWebSocketRequest(item.doc) && } {isEventStreamRequest(item.doc) && } From a896298a5accec817076cfedbb33771e73f4a9b3 Mon Sep 17 00:00:00 2001 From: allx Date: Mon, 29 Jan 2024 22:04:55 +0200 Subject: [PATCH 2/3] Fix group renaming --- packages/insomnia/src/ui/routes/debug.tsx | 37 +++++++++++------------ 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index f75ba4121..7723531f2 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -78,6 +78,7 @@ import { useReadyState } from '../hooks/use-ready-state'; import { CreateRequestType, useRequestGroupMetaPatcher, + useRequestGroupPatcher, useRequestMetaPatcher, useRequestSetter, } from '../hooks/use-request'; @@ -188,6 +189,20 @@ export const Debug: FC = () => { const patchRequestMeta = useRequestMetaPatcher(); const patchRequest = useRequestSetter(); + const patchGroup = useRequestGroupPatcher(); + + const handleItemDoublClick = (itemDoc: Request | GrpcRequest | WebSocketRequest | RequestGroup) => { + const isGroup = isRequestGroup(itemDoc); + + showPrompt({ + title: isGroup ? 'Rename Folder' : 'Rename Request', + defaultValue: itemDoc.name, + submitName: 'Rename', + selectText: true, + label: 'Name', + onComplete: name => (isGroup ? patchGroup : patchRequest)(itemDoc._id, { name }), + }); + } useEffect(() => { db.onChange(async (changes: ChangeBufferEvent[]) => { @@ -895,16 +910,7 @@ export const Debug: FC = () => { )} { - showPrompt({ - title: 'Rename Request', - defaultValue: item.doc.name, - submitName: 'Rename', - selectText: true, - label: 'Name', - onComplete: name => patchRequest(item.doc._id, { name }), - }); - }} + onDoubleClick={() => handleItemDoublClick(item.doc)} > {getRequestNameOrFallback(item.doc)} @@ -996,16 +1002,7 @@ export const Debug: FC = () => { )} { - showPrompt({ - title: 'Rename Request', - defaultValue: item.doc.name, - submitName: 'Rename', - selectText: true, - label: 'Name', - onComplete: name => patchRequest(item.doc._id, { name }), - }); - }} + onDoubleClick={() => handleItemDoublClick(item.doc)} > {getRequestNameOrFallback(item.doc)} From bcdd8f9fe433b1d7853894dc31698f7a4404e2dd Mon Sep 17 00:00:00 2001 From: allx Date: Mon, 29 Jan 2024 22:12:27 +0200 Subject: [PATCH 3/3] Wrap with useCallback --- packages/insomnia/src/ui/routes/debug.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index 7723531f2..61293e65f 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -191,7 +191,7 @@ export const Debug: FC = () => { const patchRequest = useRequestSetter(); const patchGroup = useRequestGroupPatcher(); - const handleItemDoublClick = (itemDoc: Request | GrpcRequest | WebSocketRequest | RequestGroup) => { + const handleItemDoublClick = useCallback((itemDoc: Request | GrpcRequest | WebSocketRequest | RequestGroup) => { const isGroup = isRequestGroup(itemDoc); showPrompt({ @@ -202,7 +202,7 @@ export const Debug: FC = () => { label: 'Name', onComplete: name => (isGroup ? patchGroup : patchRequest)(itemDoc._id, { name }), }); - } + }, [patchRequest, patchGroup]); useEffect(() => { db.onChange(async (changes: ChangeBufferEvent[]) => {