feat: hover placeholder transition for smartenvinput

packages/hoppscotch-common/locales/en.json

@@ -568,7 +568,9 @@
     "generated_code": "Generated code",
     "go_to_authorization_tab": "Go to Authorization tab",
     "go_to_body_tab": "Go to Body tab",
+    "graphql_placeholder": "Enter a URL",
     "header_list": "Header List",
+    "http_placeholder":"Enter a URL or cURL command",
     "invalid_name": "Please provide a name for the request",
     "method": "Method",
     "moved": "Request moved",

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -86,6 +86,8 @@ import { platform } from "~/platform"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { GQLTabService } from "~/services/tab/graphql"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 
 const t = useI18n()
 const toast = useToast()
@@ -221,6 +223,15 @@ const saveRequestAs = async () => {
 
   requestUpdated.name = requestName.value
 
+  if (props.mode === "rest") {
+    ;(requestUpdated as HoppRESTRequest).endpoint =
+      (requestUpdated as HoppRESTRequest).endpoint ||
+      getDefaultRESTRequest().endpoint
+  } else {
+    ;(requestUpdated as HoppGQLRequest).url =
+      (requestUpdated as HoppGQLRequest).url || getDefaultGQLRequest().url
+  }
+
   if (picked.value.pickedType === "my-collection") {
     if (!isHoppRESTRequest(requestUpdated))
       throw new Error("requestUpdated is not a REST Request")

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -193,6 +193,7 @@ import { PersistedOAuthConfig } from "~/services/oauth/oauth.service"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 import { EditingProperties } from "../Properties.vue"
 import { defineActionHandler } from "~/helpers/actions"
+import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 
 const t = useI18n()
 const toast = useToast()
@@ -380,32 +381,26 @@ const editCollection = (
   displayModalEdit(true)
 }
 
-const onAddRequest = ({
-  name,
-  path,
-  index,
-}: {
-  name: string
-  path: string
-  index: number
-}) => {
+const onAddRequest = ({ name, path }: { name: string; path: string }) => {
   const newRequest = {
     ...tabs.currentActiveTab.value.document.request,
     name,
+    url:
+      tabs.currentActiveTab.value.document.request.url ||
+      getDefaultGQLRequest().url,
   }
 
-  saveGraphqlRequestAs(path, newRequest)
+  const insertionIndex = saveGraphqlRequestAs(path, newRequest)
 
   const { auth, headers } = cascadeParentCollectionForHeaderAuth(
     path,
     "graphql"
   )
-
   tabs.createNewTab({
     saveContext: {
       originLocation: "user-collection",
       folderPath: path,
-      requestIndex: index,
+      requestIndex: insertionIndex,
     },
     request: newRequest,
     isDirty: false,

packages/hoppscotch-common/src/components/collections/index.vue

@@ -254,6 +254,7 @@ import { PersistenceService } from "~/services/persistence"
 import { PersistedOAuthConfig } from "~/services/oauth/oauth.service"
 import { RESTOptionTabs } from "../http/RequestOptions.vue"
 import { EditingProperties } from "./Properties.vue"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
 
 const t = useI18n()
 const toast = useToast()
@@ -790,6 +791,9 @@ const onAddRequest = (requestName: string) => {
   const newRequest = {
     ...cloneDeep(tabs.currentActiveTab.value.document.request),
     name: requestName,
+    endpoint:
+      tabs.currentActiveTab.value.document.request.endpoint ||
+      getDefaultRESTRequest().endpoint,
   }
 
   const path = editingFolderPath.value

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
-        id="url"
+      <SmartEnvInput
         v-model="url"
-        type="url"
-        autocomplete="off"
-        spellcheck="false"
-        class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
-        :placeholder="`${t('request.url')}`"
-        :disabled="connected"
-        @keyup.enter="onConnectClick"
+        :placeholder="getDefaultGQLRequest().url"
+        :placeholder-hover-string="t('request.graphql_placeholder')"
+        :readonly="connected"
+        class="rounded border border-divider bg-primaryLight"
+        @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)
@@ -98,7 +96,10 @@ const onConnectClick = () => {
 }
 
 const gqlConnect = () => {
-  connect(url.value, tabs.currentActiveTab.value?.document.request.headers)
+  connect(
+    url.value || getDefaultGQLRequest().url,
+    tabs.currentActiveTab.value?.document.request.headers
+  )
 
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
@@ -118,7 +119,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/graphql/RequestOptions.vue

@@ -76,6 +76,7 @@ import { InterceptorService } from "~/services/interceptor.service"
 import { editGraphqlRequest } from "~/newstore/collections"
 import { GQLTabService } from "~/services/tab/graphql"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 
 const VALID_GQL_OPERATIONS = [
   "query",
@@ -119,7 +120,9 @@ const request = useVModel(props, "modelValue", emit)
 
 const url = computedWithControl(
   () => tabs.currentActiveTab.value,
-  () => tabs.currentActiveTab.value.document.request.url
+  () =>
+    tabs.currentActiveTab.value.document.request.url ||
+    getDefaultGQLRequest().url
 )
 
 const activeGQLHeadersCount = computed(
@@ -247,10 +250,16 @@ const saveRequest = () => {
     tabs.currentActiveTab.value.document.saveContext.originLocation ===
       "user-collection"
   ) {
+    const finalRequest = {
+      ...tabs.currentActiveTab.value.document.request,
+      url:
+        tabs.currentActiveTab.value.document.request.url ||
+        getDefaultGQLRequest().url,
+    }
     editGraphqlRequest(
       tabs.currentActiveTab.value.document.saveContext.folderPath,
       tabs.currentActiveTab.value.document.saveContext.requestIndex,
-      tabs.currentActiveTab.value.document.request
+      finalRequest
     )
 
     tabs.currentActiveTab.value.document.isDirty = false

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="t('request.http_placeholder')"
           :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)) {

packages/hoppscotch-common/src/components/share/index.vue

@@ -134,6 +134,7 @@ import * as E from "fp-ts/Either"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
 import { watch } from "vue"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -511,7 +512,10 @@ const openRequestInNewTab = (request: HoppRESTRequest) => {
 }
 
 defineActionHandler("share.request", ({ request }) => {
-  requestToShare.value = request
+  requestToShare.value = {
+    ...request,
+    endpoint: request.endpoint || getDefaultRESTRequest().endpoint,
+  }
   displayShareRequestModal(true)
 })
 </script>