chore: update URL input

packages/hoppscotch-common/src/components/graphql/Request.vue

@@ -3,16 +3,13 @@
     class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
   >
     <div class="inline-flex flex-1 space-x-2">
-      <input
+      <SmartEnvInput
-        id="url"
         v-model="url"
-        type="url"
+        :placeholder="getDefaultGQLRequest().url"
-        autocomplete="off"
+        placeholder-hover-string="Enter a URL or paste a GraphQL endpoint"
-        spellcheck="false"
+        :readonly="connected"
-        class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
+        class="rounded border border-divider bg-primaryLight"
-        :placeholder="`${t('request.url')}`"
+        @enter="onConnectClick"
-        :disabled="connected"
-        @keyup.enter="onConnectClick"
       />
       <HoppButtonPrimary
         id="get"
@@ -72,6 +69,7 @@ import { InterceptorService } from "~/services/interceptor.service"
 import { useService } from "dioc/vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { GQLTabService } from "~/services/tab/graphql"
+import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 
 const t = useI18n()
 const tabs = useService(GQLTabService)
@@ -83,7 +81,9 @@ const connectionSwitchModal = ref(false)
 const connected = computed(() => connection.state === "CONNECTED")
 
 const url = computed({
-  get: () => tabs.currentActiveTab.value?.document.request.url ?? "",
+  get: () =>
+    tabs.currentActiveTab.value?.document.request.url ||
+    getDefaultGQLRequest().url,
   set: (value) => {
     tabs.currentActiveTab.value!.document.request.url = value
   },
@@ -118,7 +118,9 @@ watch(
   tabs.currentActiveTab,
   (newVal) => {
     if (newVal) {
-      lastTwoUrls.value.push(newVal.document.request.url)
+      lastTwoUrls.value.push(
+        newVal.document.request.url ?? getDefaultGQLRequest().url
+      )
       if (lastTwoUrls.value.length > 2) {
         lastTwoUrls.value.shift()
       }

packages/hoppscotch-common/src/components/http/Request.vue

@@ -54,9 +54,10 @@
       >
         <SmartEnvInput
           v-model="tab.document.request.endpoint"
-          :placeholder="`${t('request.url')}`"
+          :placeholder="getDefaultRESTRequest().endpoint"
           :auto-complete-source="userHistories"
           :auto-complete-env="true"
+          placeholder-hover-string="Enter a URL or cURL command"
           :inspection-results="tabResults"
           @paste="onPasteUrl($event)"
           @enter="newSendRequest"
@@ -331,12 +332,12 @@ const tabs = useService(RESTTabService)
 const workspaceService = useService(WorkspaceService)
 
 const newSendRequest = async () => {
-  if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
+  if (/^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
     return
   }
 
-  ensureMethodInEndpoint()
+  if (newEndpoint.value) ensureMethodInEndpoint()
 
   loading.value = true
 
@@ -348,7 +349,20 @@ const newSendRequest = async () => {
     workspaceType: workspaceService.currentWorkspace.value.type,
   })
 
-  const [cancel, streamPromise] = runRESTRequest$(tab)
+  const finalTab = ref({
+    ...tab.value,
+    document: {
+      ...tab.value.document,
+      request: {
+        ...tab.value.document.request,
+        endpoint:
+          tab.value.document.request.endpoint ||
+          getDefaultRESTRequest().endpoint,
+      },
+    },
+  })
+
+  const [cancel, streamPromise] = runRESTRequest$(finalTab)
   const streamResult = await streamPromise
 
   requestCancelFunc.value = cancel
@@ -472,8 +486,13 @@ const fetchingShareLink = ref(false)
 
 const shareRequest = () => {
   if (currentUser.value) {
+    const finalRequest = {
+      ...tab.value.document.request,
+      endpoint:
+        tab.value.document.request.endpoint || getDefaultRESTRequest().endpoint,
+    }
     invokeAction("share.request", {
-      request: tab.value.document.request,
+      request: finalRequest,
     })
   } else {
     invokeAction("modals.login.toggle")
@@ -513,11 +532,17 @@ const saveRequest = () => {
     showSaveRequestModal.value = true
     return
   }
-  if (saveCtx.originLocation === "user-collection") {
-    const req = tab.value.document.request
 
+  const req = tab.value.document.request
+
+  const finalRequest = {
+    ...req,
+    endpoint: req.endpoint.trim() || getDefaultRESTRequest().endpoint,
+  }
+
+  if (saveCtx.originLocation === "user-collection") {
     try {
-      editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, req)
+      editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, finalRequest)
 
       tab.value.document.isDirty = false
 
@@ -534,8 +559,6 @@ const saveRequest = () => {
       saveRequest()
     }
   } else if (saveCtx.originLocation === "team-collection") {
-    const req = tab.value.document.request
-
     // TODO: handle error case (NOTE: overwriteRequestTeams is async)
     try {
       platform.analytics?.logEvent({
@@ -549,7 +572,7 @@ const saveRequest = () => {
         requestID: saveCtx.requestID,
         data: {
           title: req.name,
-          request: JSON.stringify(req),
+          request: JSON.stringify(finalRequest),
         },
       })().then((result) => {
         if (E.isLeft(result)) {