From b75719a53ed81d3e8b2bb084a6b14d31abf10df4 Mon Sep 17 00:00:00 2001
From: allx <udivankin@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:39:22 +0200
Subject: [PATCH] Add Request Settings Modal autofocus to ease up add
 description user journey

---
 .../dropdowns/request-actions-dropdown.tsx    |  1 +
 .../modals/request-settings-modal.tsx         | 19 ++++++++++++++++++-
 .../src/ui/components/panes/request-pane.tsx  |  1 +
 .../websockets/websocket-request-pane.tsx     |  1 +
 packages/insomnia/src/ui/routes/debug.tsx     |  1 +
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
index b4524b1d6..298451a41 100644
--- a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
@@ -258,6 +258,7 @@ export const RequestActionsDropdown = ({
       <RequestSettingsModal
         request={request}
         onHide={() => setIsSettingsModalOpen(false)}
+        autoFocusOn="name"
       />
     )}
     </Fragment>
diff --git a/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
index 70232b8dc..1890f2a2a 100644
--- a/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
@@ -18,17 +18,20 @@ import { MarkdownEditor } from '../markdown-editor';
 
 export interface RequestSettingsModalOptions {
   request: Request | GrpcRequest | WebSocketRequest;
+  autoFocusOn?: 'name' | 'description';
 }
 interface State {
   defaultPreviewMode: boolean;
   activeWorkspaceIdToCopyTo: string;
 }
 
-export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSettingsModalOptions) => {
+export const RequestSettingsModal = ({ request, onHide, autoFocusOn }: ModalProps & RequestSettingsModalOptions) => {
   const modalRef = useRef<ModalHandle>(null);
   const editorRef = useRef<CodeEditorHandle>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
   const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
   const workspacesFetcher = useFetcher();
+
   useEffect(() => {
     const isIdleAndUninitialized = workspacesFetcher.state === 'idle' && !workspacesFetcher.data;
     if (isIdleAndUninitialized) {
@@ -37,12 +40,24 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
   }, [organizationId, projectId, workspacesFetcher]);
   const projectLoaderData = workspacesFetcher?.data as ProjectLoaderData;
   const workspacesForActiveProject = projectLoaderData?.workspaces.map(w => w.workspace) || [];
+
   const [state, setState] = useState<State>({
     defaultPreviewMode: !!request?.description,
     activeWorkspaceIdToCopyTo: '',
   });
+
   useEffect(() => {
     modalRef.current?.show();
+
+    if (autoFocusOn) {
+      setTimeout(() => {
+        if (autoFocusOn === 'description') {
+          editorRef.current?.focus();
+        } else if (autoFocusOn === 'name') {
+          nameRef.current?.focus();
+        }
+      });
+    }
   }, []);
 
   const requestFetcher = useFetcher();
@@ -56,6 +71,7 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
         encType: 'application/json',
       });
   };
+
   async function handleMoveToWorkspace() {
     guard(state.activeWorkspaceIdToCopyTo, 'Workspace ID is required');
     patchRequest(request._id, { parentId: state.activeWorkspaceIdToCopyTo });
@@ -93,6 +109,7 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                 Name{' '}
                 <span className="txt-sm faint italic">(also rename by double-clicking in sidebar)</span>
                 <input
+                  ref={nameRef}
                   type="text"
                   placeholder={request?.url || 'My Request'}
                   defaultValue={request?.name}
diff --git a/packages/insomnia/src/ui/components/panes/request-pane.tsx b/packages/insomnia/src/ui/components/panes/request-pane.tsx
index df3e9b60a..a302b8d47 100644
--- a/packages/insomnia/src/ui/components/panes/request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-pane.tsx
@@ -342,6 +342,7 @@ export const RequestPane: FC<Props> = ({
         <RequestSettingsModal
           request={activeRequest}
           onHide={() => setIsRequestSettingsModalOpen(false)}
+          autoFocusOn="description"
         />
       )}
     </Pane>
diff --git a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
index 6639713e9..9ce493f8d 100644
--- a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
+++ b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
@@ -401,6 +401,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
         <RequestSettingsModal
           request={activeRequest}
           onHide={() => setIsRequestSettingsModalOpen(false)}
+          autoFocusOn="description"
         />
       )}
     </Pane>
diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
index 5167c6472..df1aaa31c 100644
--- a/packages/insomnia/src/ui/routes/debug.tsx
+++ b/packages/insomnia/src/ui/routes/debug.tsx
@@ -1059,6 +1059,7 @@ export const Debug: FC = () => {
               <RequestSettingsModal
                 request={activeRequest}
                 onHide={() => setIsRequestSettingsModalOpen(false)}
+                autoFocusOn="name"
               />
             )}
           </ErrorBoundary>