Implement request rename on double click (as promised)

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,
@@ -78,7 +78,9 @@ import { useReadyState } from '../hooks/use-ready-state';
 import {
   CreateRequestType,
   useRequestGroupMetaPatcher,
+  useRequestGroupPatcher,
   useRequestMetaPatcher,
+  useRequestSetter,
 } from '../hooks/use-request';
 import {
   GrpcRequestLoaderData,
@@ -186,6 +188,22 @@ export const Debug: FC = () => {
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
 
   const patchRequestMeta = useRequestMetaPatcher();
+  const patchRequest = useRequestSetter();
+  const patchGroup = useRequestGroupPatcher();
+
+  const handleItemDoublClick = useCallback((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 }),
+    });
+  }, [patchRequest, patchGroup]);
+
   useEffect(() => {
     db.onChange(async (changes: ChangeBufferEvent[]) => {
       for (const change of changes) {
@@ -617,7 +635,7 @@ export const Debug: FC = () => {
   const virtualizer = useVirtualizer<HTMLDivElement | null, Child>({
     getScrollElement: () => parentRef.current,
     count: visibleCollection.length,
-    estimateSize: React.useCallback(() => 32, []),
+    estimateSize: useCallback(() => 32, []),
     overscan: 30,
     getItemKey: index => visibleCollection[index].doc._id,
   });
@@ -890,7 +908,12 @@ export const Debug: FC = () => {
                           gRPC
                         </span>
                       )}
-                      <span className="truncate">{getRequestNameOrFallback(item.doc)}</span>
+                      <span
+                        className="truncate"
+                        onDoubleClick={() => handleItemDoublClick(item.doc)}
+                      >
+                        {getRequestNameOrFallback(item.doc)}
+                      </span>
                       <span className="flex-1" />
                       {item.pinned && (
                         <Icon className='text-[--font-size-sm]' icon="thumb-tack" />
@@ -977,7 +1000,12 @@ export const Debug: FC = () => {
                             icon={item.collapsed ? 'folder' : 'folder-open'}
                           />
                         )}
-                        <span className="truncate">{getRequestNameOrFallback(item.doc)}</span>
+                        <span
+                          className="truncate"
+                          onDoubleClick={() => handleItemDoublClick(item.doc)}
+                        >
+                          {getRequestNameOrFallback(item.doc)}
+                        </span>
                         <span className="flex-1" />
                         {isWebSocketRequest(item.doc) && <WebSocketSpinner requestId={item.doc._id} />}
                         {isEventStreamRequest(item.doc) && <EventStreamSpinner requestId={item.doc._id} />}