refactor: wire remaining request actions

components/app/Shortcuts.vue

@@ -8,6 +8,7 @@
           flex
           p-2
           top-0
+          z-10
           items-center
           sticky
           justify-between

components/app/SlideOver.vue

@@ -10,7 +10,7 @@
     >
       <div
         v-show="show"
-        class="inset-0 transition-opacity z-10 fixed"
+        class="inset-0 transition-opacity z-20 fixed"
         @keydown.esc="close()"
       >
         <div

components/collections/SaveRequest.vue

@@ -11,10 +11,9 @@
         </label>
         <input
           id="selectLabelSaveReq"
-          v-model="requestData.name"
+          v-model="requestName"
           class="input"
           type="text"
-          @keyup.enter="saveRequestAs"
         />
         <label class="font-semibold text-xs px-4 pt-4 pb-4">
           Select Location
@@ -47,6 +46,7 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
   saveRESTRequestAs,
@@ -54,20 +54,23 @@ import {
   editGraphqlRequest,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
+import { getRESTRequest, useRESTRequestName } from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
   props: {
     // mode can be either "graphql" or "rest"
     mode: { type: String, default: "rest" },
     show: Boolean,
-    editingRequest: { type: Object, default: () => {} },
+  },
+  setup() {
+    return {
+      requestName: useRESTRequestName(),
+    }
   },
   data() {
     return {
-      defaultRequestName: "Untitled Request",
-      path: "Path will appear here",
       requestData: {
-        name: undefined,
+        name: this.requestName,
         collectionIndex: undefined,
         folderName: undefined,
         requestIndex: undefined,
@@ -114,10 +117,7 @@ export default {
         return
       }
 
-      const requestUpdated = {
+      const requestUpdated = getRESTRequest()
-        ...this.$props.editingRequest,
-        name: this.$data.requestData.name,
-      }
 
       // Filter out all REST file inputs
       if (this.mode === "rest" && requestUpdated.bodyParams) {
@@ -180,5 +180,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/my/Request.vue

@@ -109,6 +109,8 @@
 </template>
 
 <script>
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
 export default {
   props: {
     request: { type: Object, default: () => {} },
@@ -158,8 +160,7 @@ export default {
             requestIndex: this.requestIndex,
           },
         })
-      else
+      else setRESTRequest(translateToNewRequest(this.request))
-        this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     dragStart({ dataTransfer }) {
       this.dragging = !this.dragging

components/collections/teams/Request.vue

@@ -102,6 +102,8 @@
 </template>
 
 <script>
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
 export default {
   props: {
     request: { type: Object, default: () => {} },
@@ -145,8 +147,7 @@ export default {
             requestID: this.requestIndex,
           },
         })
-      else
+      else setRESTRequest(translateToNewRequest(this.request))
-        this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
       this.$emit("remove-request", {

components/http/ImportCurl.vue

@@ -102,6 +102,7 @@ export default defineComponent({
 
         setRESTRequest(
           makeRESTRequest({
+            name: "Untitled request",
             endpoint,
             method,
             params,

components/http/Request.vue

@@ -116,7 +116,7 @@
             :label="$t('clear_all')"
             icon="clear_all"
             @click.native="
-              clearContent('', $event)
+              clearContent()
               $refs.sendOptions.tippy().hide()
             "
           />
@@ -127,7 +127,7 @@
         :label="$t('save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
-        @click.native="newSendRequest"
+        @click.native="showSaveRequestModal = true"
       />
       <span class="inline-flex">
         <tippy
@@ -147,7 +147,7 @@
           </template>
           <input
             id="request-name"
-            v-model="name"
+            v-model="requestName"
             :placeholder="$t('request_name')"
             name="request-name"
             type="text"
@@ -167,7 +167,7 @@
             :label="$t('save_to_collections')"
             icon="create_new_folder"
             @click.native="
-              saveRequest()
+              showSaveRequestModal = true
               $refs.saveOptions.tippy().hide()
             "
           />
@@ -182,21 +182,34 @@
       :show="showCodegenModal"
       @hide-modal="showCodegenModal = false"
     />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
   </div>
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   updateRESTResponse,
   restEndpoint$,
   setRESTEndpoint,
   restMethod$,
   updateRESTMethod,
+  resetRESTRequest,
+  useRESTRequestName,
 } from "~/newstore/RESTSession"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      requestName: useRESTRequestName(),
+    }
+  },
   data() {
     return {
       newMethod$: "",
@@ -218,6 +231,7 @@ export default {
       showCodegenModal: false,
       navigatorShare: navigator.share,
       loading: false,
+      showSaveRequestModal: false,
     }
   },
   subscriptions() {
@@ -252,6 +266,33 @@ export default {
         }
       )
     },
+    copyRequest() {
+      if (navigator.share) {
+        const time = new Date().toLocaleTimeString()
+        const date = new Date().toLocaleDateString()
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
+            url: window.location.href,
+          })
+          .then(() => {})
+          .catch(() => {})
+      } else {
+        const dummy = document.createElement("input")
+        document.body.appendChild(dummy)
+        dummy.value = window.location.href
+        dummy.select()
+        document.execCommand("copy")
+        document.body.removeChild(dummy)
+        this.$toast.info(this.$t("copied_to_clipboard"), {
+          icon: "done",
+        })
+      }
+    },
+    clearContent() {
+      resetRESTRequest()
+    },
   },
-}
+})
 </script>

helpers/types/HoppRESTRequest.ts

@@ -23,6 +23,7 @@ export type HoppRESTReqBody = {
 export interface HoppRESTRequest {
   v: string
 
+  name: string
   method: string
   endpoint: string
   params: HoppRESTParam[]
@@ -80,6 +81,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
       })
     )
 
+    const name = x.name
     const method = x.method
 
     const preRequestScript = x.preRequestScript
@@ -88,6 +90,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
     const body = parseRequestBody(x)
 
     const result: HoppRESTRequest = {
+      name,
       endpoint,
       headers,
       params,

newstore/RESTSession.ts

@@ -119,21 +119,24 @@ type RESTSession = {
   testResults: HoppTestResult | null
 }
 
-const defaultRESTSession: RESTSession = {
+const defaultRESTRequest: HoppRESTRequest = {
-  request: {
+  v: RESTReqSchemaVersion,
-    v: RESTReqSchemaVersion,
+  endpoint: "https://httpbin.org/get",
-    endpoint: "https://httpbin.org/get",
+  name: "Untitled request",
-    params: [],
+  params: [],
-    headers: [],
+  headers: [],
-    method: "GET",
+  method: "GET",
-    preRequestScript: "// pw.env.set('variable', 'value');",
+  preRequestScript: "// pw.env.set('variable', 'value');",
-    testScript: "// pw.expect('variable').toBe('value');",
+  testScript: "// pw.expect('variable').toBe('value');",
-    body: {
+  body: {
-      contentType: "application/json",
+    contentType: "application/json",
-      body: "",
+    body: "",
-      isRaw: false,
+    isRaw: false,
-    },
   },
+}
+
+const defaultRESTSession: RESTSession = {
+  request: defaultRESTRequest,
   response: null,
   testResults: null,
 }
@@ -144,6 +147,14 @@ const dispatchers = defineDispatchers({
       request: req,
     }
   },
+  setRequestName(curr: RESTSession, { newName }: { newName: string }) {
+    return {
+      request: {
+        ...curr.request,
+        name: newName,
+      },
+    }
+  },
   setEndpoint(curr: RESTSession, { newEndpoint }: { newEndpoint: string }) {
     const paramsInNewURL = getParamsInURL(newEndpoint)
     const updatedParams = recalculateParams(
@@ -362,6 +373,10 @@ export function setRESTRequest(req: HoppRESTRequest) {
   })
 }
 
+export function resetRESTRequest() {
+  setRESTRequest(defaultRESTRequest)
+}
+
 export function setRESTEndpoint(newEndpoint: string) {
   restSessionStore.dispatch({
     dispatcher: "setEndpoint",
@@ -371,6 +386,15 @@ export function setRESTEndpoint(newEndpoint: string) {
   })
 }
 
+export function setRESTRequestName(newName: string) {
+  restSessionStore.dispatch({
+    dispatcher: "setRequestName",
+    payload: {
+      newName,
+    },
+  })
+}
+
 export function addRESTParam(newParam: HoppRESTParam) {
   restSessionStore.dispatch({
     dispatcher: "addParam",
@@ -507,6 +531,11 @@ export const restRequest$ = restSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
+export const restRequestName$ = restRequest$.pipe(
+  pluck("name"),
+  distinctUntilChanged()
+)
+
 export const restEndpoint$ = restSessionStore.subject$.pipe(
   pluck("request", "endpoint"),
   distinctUntilChanged()
@@ -608,3 +637,11 @@ export function useRESTRequestBody(): Ref<HoppRESTReqBody> {
     setRESTReqBody
   )
 }
+
+export function useRESTRequestName(): Ref<string> {
+  return useStream(
+    restRequestName$,
+    restSessionStore.value.request.name,
+    setRESTRequestName
+  )
+}

pages/index.vue

@@ -287,13 +287,6 @@
       </Pane>
     </Splitpanes>
 
-    <CollectionsSaveRequest
-      mode="rest"
-      :show="showSaveRequestModal"
-      @hide-modal="hideRequestModal"
-      :editing-request="editRequest"
-    />
-
     <HttpTokenList
       :show="showTokenListModal"
       :tokens="tokens"
@@ -449,7 +442,6 @@ export default defineComponent({
       showTokenListModal: false,
       showTokenRequest: false,
       showTokenRequestList: false,
-      showSaveRequestModal: false,
       editRequest: {},
       files: [],
       filenames: "",
@@ -1291,35 +1283,6 @@ export default defineComponent({
         },
       })
     },
-    copyRequest() {
-      if (navigator.share) {
-        const time = new Date().toLocaleTimeString()
-        const date = new Date().toLocaleDateString()
-        navigator
-          .share({
-            title: "Hoppscotch",
-            text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
-            url: window.location.href,
-          })
-          .then(() => {})
-          .catch(() => {})
-      } else {
-        const dummy = document.createElement("input")
-        document.body.appendChild(dummy)
-        dummy.value = window.location.href
-        dummy.select()
-        document.execCommand("copy")
-        document.body.removeChild(dummy)
-        this.$refs.copyRequest.innerHTML = this.doneButton
-        this.$toast.info(this.$t("copied_to_clipboard"), {
-          icon: "done",
-        })
-        setTimeout(
-          () => (this.$refs.copyRequest.innerHTML = this.copyButton),
-          1000
-        )
-      }
-    },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {
@@ -1448,35 +1411,6 @@ export default defineComponent({
         1000
       )
     },
-    saveRequest() {
-      let urlAndPath = parseUrlAndPath(this.uri)
-      this.editRequest = {
-        url: decodeURI(urlAndPath.url),
-        path: decodeURI(urlAndPath.path),
-        method: this.method,
-        auth: this.auth,
-        httpUser: this.httpUser,
-        httpPassword: this.httpPassword,
-        passwordFieldType: this.passwordFieldType,
-        bearerToken: this.bearerToken,
-        headers: this.headers,
-        params: this.params,
-        bodyParams: this.bodyParams,
-        rawParams: this.rawParams,
-        rawInput: this.rawInput,
-        contentType: this.contentType,
-        requestType: this.requestType,
-        preRequestScript:
-          this.showPreRequestScript == true ? this.preRequestScript : null,
-        testScript: this.testScript,
-        name: this.requestName,
-      }
-      this.showSaveRequestModal = true
-    },
-    hideRequestModal() {
-      this.showSaveRequestModal = false
-      this.editRequest = {}
-    },
     setExclude(excludedField, excluded) {
       const update = clone(this.URL_EXCLUDES)