feat: Add save as actions

src/lib/ipcChannels.ts

@@ -46,6 +46,7 @@ export const ACTIONS = {
   toggleSidebar: 'action:toggle-sidebar',
   sendRequest: 'action:send-request',
   saveRequest: 'action:save-request',
+  saveAsRequest: 'action:save-as-request',
   toggleRequestPanel: 'action:toggle-request-panel',
   toggleConsole: 'action:toggle-console',
   escape: 'action:escape'

src/main/shortcutActions.ts

@@ -21,6 +21,7 @@ export const registerShortcuts = (mainWindow: BrowserWindow) => {
   ws.register('commandOrControl+b', ACTIONS.toggleSidebar, mainWindow)
   ws.register('commandOrControl+Enter', ACTIONS.sendRequest, mainWindow)
   ws.register('commandOrControl+s', ACTIONS.saveRequest, mainWindow)
+  ws.register('commandOrControl+shift+s', ACTIONS.saveAsRequest, mainWindow)
   ws.register('commandOrControl+shift+c', ACTIONS.toggleConsole, mainWindow)
   ws.register('commandOrControl+shift+p', ACTIONS.toggleRequestPanel, mainWindow)
   ws.register('escape', ACTIONS.escape, mainWindow)

src/renderer/src/components/request/RequestPanelContent.tsx

@@ -10,7 +10,7 @@ import styles from './Request.module.css'
 import { ACTIONS } from '../../../../lib/ipcChannels'
 
 export default function RequestPanelContent() {
-  const { isActive, request, fetching, save } = useContext(RequestContext)
+  const { isActive, request, fetching, save, setOpenSaveAs } = useContext(RequestContext)
 
   const requestPanel = useRef<ImperativePanelHandle>(null)
   const [requestPanelCollapsed, setRequestPanelCollapsed] = useState(false)
@@ -35,6 +35,17 @@ export default function RequestPanelContent() {
     }
   }, [isActive, save])
 
+  useEffect(() => {
+    if (!isActive) return
+    const ipcRenderer = window.electron.ipcRenderer
+    ipcRenderer.on(ACTIONS.saveAsRequest, () => {
+      setOpenSaveAs && setOpenSaveAs(true)
+    })
+    return () => {
+      ipcRenderer.removeAllListeners(ACTIONS.saveAsRequest)
+    }
+  }, [isActive, setOpenSaveAs])
+
   useEffect(() => {
     if (!isActive) return
     const ipcRenderer = window.electron.ipcRenderer

src/renderer/src/components/request/SaveAs/SaveAs.tsx

@@ -37,7 +37,11 @@ export default function SaveAs({ onClose }: { onClose: () => void }) {
     if (!tab) {
       return
     }
-    setRequestName(tab.name || '')
+    let name = tab.name
+    if (!name || tab.type === 'draft') {
+      name = ''
+    }
+    setRequestName(name)
     if (!tab.collectionId) {
       return
     }

src/renderer/src/components/request/SaveButton.tsx

@@ -1,20 +1,31 @@
-import React, { useContext, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import styles from './Request.module.css'
 import Icon from '../base/Icon/Icon'
 import LinkedModal from '../base/linkedModal/LinkedModal'
 import { RequestContext } from '../../context/RequestContext'
 import SaveAs from './SaveAs/SaveAs'
 
 export default function SaveButton() {
-  const { path, save } = useContext(RequestContext)
+  const { path, save, openSaveAs, setOpenSaveAs } = useContext(RequestContext)
   const arrowRef = useRef(null)
   const [showModal, setShowModal] = useState(false)
   const [showDialog, setShowDialog] = useState(false)
 
+  useEffect(() => {
+    if (openSaveAs) {
+      setShowDialog(true)
+      setShowModal(false)
+    }
+  }, [openSaveAs])
+
   const handleClick = (e: React.MouseEvent) => {
+    console.log('handleClick', path)
     e.stopPropagation()
-    if (!path) return
-    save()
+    if (!path || path.length === 0) {
+      openDialog(e)
+    } else {
+      save()
+    }
   }
 
   const openModal = (e: React.MouseEvent) => {
@@ -28,6 +39,11 @@ export default function SaveButton() {
     setShowModal(false)
   }
 
+  const closeDialog = () => {
+    setShowDialog(false)
+    setOpenSaveAs && setOpenSaveAs(false)
+  }
+
   return (
     <div className={styles.saveButton}>
       <button className={styles.save} onClick={handleClick}>
@@ -50,7 +66,7 @@ export default function SaveButton() {
           <div onClick={openDialog}>Save as...</div>
         </LinkedModal>
       )}
-      {showDialog && <SaveAs onClose={() => setShowDialog(false)} />}
+      {showDialog && <SaveAs onClose={closeDialog} />}
     </div>
   )
 }

src/renderer/src/context/RequestContext.tsx

@@ -66,6 +66,7 @@ export default function RequestContextProvider({
   const [requestPathParams, setRequestPathParams] = useState(definedRequest.pathParams || [])
   const [requestQueryParams, setRequestQueryParams] = useState(definedRequest.queryParams || [])
   const [requestFullUrl, setRequestFullUrl] = useState(definedRequest.url || '')
+  const [openSaveAs, setOpenSaveAs] = useState(false)
 
   const [launchRequest, setLaunchRequest] = useState(false)
   const [fetching, setFetching] = useState(false)
@@ -379,6 +380,7 @@ export default function RequestContextProvider({
     if (!collections) return
     if (!collectionId) {
       console.error('No collection selected')
+      setOpenSaveAs(true)
       return
     }
     const request = {
@@ -635,7 +637,9 @@ export default function RequestContextProvider({
     save: saveRequest,
     saved,
     requestConsole,
-    tabId
+    tabId,
+    openSaveAs,
+    setOpenSaveAs
   }
 
   return <RequestContext.Provider value={contextValue}>{children}</RequestContext.Provider>

src/types/types.d.ts

@@ -245,6 +245,8 @@ type RequestContestType = {
   save: () => void
   requestConsole?: ConsoleHookType | null
   tabId?: Identifier
+  openSaveAs?: boolean
+  setOpenSaveAs?: (openSaveAs: boolean) => void
 }
 
 type Theme = 'light' | 'dark' | 'system'