chore: add i18n and readonly to envinput

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/graphql/Request.vue

@@ -6,7 +6,7 @@
       <SmartEnvInput
         v-model="url"
         :placeholder="getDefaultGQLRequest().url"
-        placeholder-hover-string="Enter a URL or paste a GraphQL endpoint"
+        :placeholder-hover-string="t('request.graphql_placeholder')"
         :readonly="connected"
         class="rounded border border-divider bg-primaryLight"
         @enter="onConnectClick"
@@ -81,9 +81,7 @@ const connectionSwitchModal = ref(false)
 const connected = computed(() => connection.state === "CONNECTED")
 
 const url = computed({
-  get: () =>
+  get: () => tabs.currentActiveTab.value?.document.request.url ?? "",
-    tabs.currentActiveTab.value?.document.request.url ||
-    getDefaultGQLRequest().url,
   set: (value) => {
     tabs.currentActiveTab.value!.document.request.url = value
   },
@@ -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",

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

@@ -57,7 +57,7 @@
           :placeholder="getDefaultRESTRequest().endpoint"
           :auto-complete-source="userHistories"
           :auto-complete-env="true"
-          placeholder-hover-string="Enter a URL or cURL command"
+          :placeholder-hover-string="t('request.http_placeholder')"
           :inspection-results="tabResults"
           @paste="onPasteUrl($event)"
           @enter="newSendRequest"

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>

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -451,6 +451,7 @@ function handleTextSelection() {
 }
 
 const placeholderCompt = new Compartment()
+const readOnlyCompt = new Compartment()
 
 // Debounce to prevent double click from selecting the word
 const debouncedTextSelection = (time: number) =>
@@ -486,6 +487,7 @@ const getExtensions = (readonly: boolean): Extension => {
     }),
     EditorState.changeFilter.of(() => !readonly),
     inputTheme,
+    readOnlyCompt.of(EditorState.readOnly.of(readonly)),
     readonly
       ? EditorView.theme({
           ".cm-content": {
@@ -519,7 +521,7 @@ const getExtensions = (readonly: boolean): Extension => {
       },
       mouseenter() {
         //change placeholder to hover string if provided
-        if (props.placeholderHoverString) {
+        if (props.placeholderHoverString && !props.readonly) {
           placeholderString.value = props.placeholderHoverString
           view.value?.dispatch({
             effects: placeholderCompt.reconfigure(
@@ -530,7 +532,7 @@ const getExtensions = (readonly: boolean): Extension => {
       },
       mouseleave() {
         //change placeholder back to original string
-        if (props.placeholderHoverString) {
+        if (props.placeholderHoverString && !props.readonly) {
           view.value?.dispatch({
             effects: placeholderCompt.reconfigure(
               placeholderExt(props.placeholder)
@@ -601,6 +603,29 @@ const getExtensions = (readonly: boolean): Extension => {
   return extensions
 }
 
+watch(
+  () => props.readonly,
+  (readonly) => {
+    if (readonly) {
+      view.value!.dispatch({
+        effects: [
+          readOnlyCompt.reconfigure([
+            EditorState.readOnly.of(readonly),
+            EditorView.theme({
+              ".cm-content": {
+                caretColor: "var(--secondary-dark-color)",
+                color: "var(--secondary-dark-color)",
+                backgroundColor: "var(--divider-color)",
+                opacity: 0.25,
+              },
+            }),
+          ]),
+        ],
+      })
+    }
+  }
+)
+
 const triggerTextSelection = () => {
   nextTick(() => {
     view.value?.focus()