From 0c993d0e90b86ba3680a543fe6a89fbd2c518ccf Mon Sep 17 00:00:00 2001 From: nivedin Date: Wed, 24 Apr 2024 20:10:27 +0530 Subject: [PATCH] chore: add i18n and readonly to envinput --- packages/hoppscotch-common/locales/en.json | 2 ++ .../src/components/graphql/Request.vue | 11 +++---- .../src/components/http/Request.vue | 2 +- .../src/components/share/index.vue | 6 +++- .../src/components/smart/EnvInput.vue | 29 +++++++++++++++++-- 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index 0d0b57a31..f809c61cb 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/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", diff --git a/packages/hoppscotch-common/src/components/graphql/Request.vue b/packages/hoppscotch-common/src/components/graphql/Request.vue index 0732cdfe1..fb820a21c 100644 --- a/packages/hoppscotch-common/src/components/graphql/Request.vue +++ b/packages/hoppscotch-common/src/components/graphql/Request.vue @@ -6,7 +6,7 @@ connection.state === "CONNECTED") const url = computed({ - get: () => - tabs.currentActiveTab.value?.document.request.url || - getDefaultGQLRequest().url, + get: () => tabs.currentActiveTab.value?.document.request.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", diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue index 0d84d4f82..2558db223 100644 --- a/packages/hoppscotch-common/src/components/http/Request.vue +++ b/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" diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue index 3a635f517..35c4eae1b 100644 --- a/packages/hoppscotch-common/src/components/share/index.vue +++ b/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) }) diff --git a/packages/hoppscotch-common/src/components/smart/EnvInput.vue b/packages/hoppscotch-common/src/components/smart/EnvInput.vue index 3638c6cad..8cd309cfe 100644 --- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue +++ b/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()