btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: move from network strategies to generic interceptor service (#3242)

Browse Source
This commit is contained in:
Andrew Bastin
2023-08-21 07:50:35 +05:30
committed by GitHub
parent d4d1e27ba9
commit 10bb68a538
33 changed files with 1470 additions and 1314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-common/locales/en.json
View File

@@ -249,6 +249,7 @@
"no_duration": "No duration",
"no_results_found": "No matches found",
"page_not_found": "This page could not be found",
"proxy_error": "Proxy error",
"script_fail": "Could not execute pre-request script",
"something_went_wrong": "Something went wrong",
"test_script_fail": "Could not execute post-request script"

3
packages/hoppscotch-common/src/components.d.ts vendored
View File

@@ -92,6 +92,7 @@ declare module '@vue/runtime-core' {
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
@@ -160,6 +161,8 @@ declare module '@vue/runtime-core' {
RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']

102
packages/hoppscotch-common/src/components/app/Interceptor.vue
View File

@@ -8,91 +8,41 @@
{{ t("settings.interceptor_description") }}
</p>
</div>
<HoppSmartRadioGroup
v-model="interceptorSelection"
:radios="interceptors"
/>
<div
v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
class="flex space-x-2"
>
<HoppButtonSecondary
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
label="Chrome"
outline
class="!flex-1"
/>
<HoppButtonSecondary
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"
label="Firefox"
outline
class="!flex-1"
/>
<div>
<div
v-for="interceptor in interceptors"
:key="interceptor.interceptorID"
class="flex flex-col"
>
<HoppSmartRadio
:value="interceptor.interceptorID"
:label="unref(interceptor.name(t))"
:selected="interceptorSelection === interceptor.interceptorID"
@change="interceptorSelection = interceptor.interceptorID"
/>
<component
:is="interceptor.selectorSubtitle"
v-if="interceptor.selectorSubtitle"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import IconChrome from "~icons/brands/chrome"
import IconFirefox from "~icons/brands/firefox"
import { computed } from "vue"
import { applySetting, toggleSetting } from "~/newstore/settings"
import { useSetting } from "@composables/settings"
import { useI18n } from "@composables/i18n"
import { useReadonlyStream } from "@composables/stream"
import { extensionStatus$ } from "~/newstore/HoppExtension"
import { useService } from "dioc/vue"
import { Ref, unref } from "vue"
import { InterceptorService } from "~/services/interceptor.service"
const t = useI18n()
const PROXY_ENABLED = useSetting("PROXY_ENABLED")
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
const interceptorService = useService(InterceptorService)
const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
const interceptorSelection =
interceptorService.currentInterceptorID as Ref<string>
const extensionVersion = computed(() => {
return currentExtensionStatus.value === "available"
? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
: null
})
const interceptors = computed(() => [
{ value: "BROWSER_ENABLED" as const, label: t("state.none") },
{ value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
{
value: "EXTENSIONS_ENABLED" as const,
label:
`${t("settings.extensions")}: ` +
(extensionVersion.value !== null
? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
: t("settings.extension_ver_not_reported")),
},
])
type InterceptorMode = (typeof interceptors)["value"][number]["value"]
const interceptorSelection = computed<InterceptorMode>({
get() {
if (PROXY_ENABLED.value) return "PROXY_ENABLED"
if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
return "BROWSER_ENABLED"
},
set(val) {
if (val === "EXTENSIONS_ENABLED") {
applySetting("EXTENSIONS_ENABLED", true)
if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
}
if (val === "PROXY_ENABLED") {
applySetting("PROXY_ENABLED", true)
if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
}
if (val === "BROWSER_ENABLED") {
applySetting("PROXY_ENABLED", false)
applySetting("EXTENSIONS_ENABLED", false)
}
},
})
const interceptors = interceptorService.availableInterceptors
</script>

7
packages/hoppscotch-common/src/components/graphql/Request.vue
View File

@@ -29,7 +29,6 @@
<script setup lang="ts">
import { platform } from "~/platform"
import { GQLConnection } from "~/helpers/GQLConnection"
import { getCurrentStrategyID } from "~/helpers/network"
import { useReadonlyStream, useStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import {
@@ -38,9 +37,13 @@ import {
gqlURL$,
setGQLURL,
} from "~/newstore/GQLSession"
import { useService } from "dioc/vue"
import { InterceptorService } from "~/services/interceptor.service"
const t = useI18n()
const interceptorService = useService(InterceptorService)
const props = defineProps<{
conn: GQLConnection
}>()
@@ -62,7 +65,7 @@ const onConnectClick = () => {
platform.analytics?.logEvent({
type: "HOPP_REQUEST_RUN",
platform: "graphql-schema",
strategy: getCurrentStrategyID(),
strategy: interceptorService.currentInterceptorID.value!,
})
} else {
props.conn.disconnect()

7
packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
View File

@@ -373,7 +373,6 @@ import { commonHeaders } from "~/helpers/headers"
import { GQLConnection } from "~/helpers/GQLConnection"
import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
import { platform } from "~/platform"
import { getCurrentStrategyID } from "~/helpers/network"
import { useCodemirror } from "@composables/codemirror"
import jsonLinter from "~/helpers/editor/linting/json"
import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
@@ -381,6 +380,8 @@ import queryCompleter from "~/helpers/editor/completion/gqlQuery"
import { defineActionHandler } from "~/helpers/actions"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { objRemoveKey } from "~/helpers/functional/object"
import { useService } from "dioc/vue"
import { InterceptorService } from "~/services/interceptor.service"
type OptionTabs = "query" | "headers" | "variables" | "authorization"
@@ -390,6 +391,8 @@ const selectedOptionTab = ref<OptionTabs>("query")
const t = useI18n()
const interceptorService = useService(InterceptorService)
const props = defineProps<{
conn: GQLConnection
}>()
@@ -744,7 +747,7 @@ const runQuery = async () => {
platform.analytics?.logEvent({
type: "HOPP_REQUEST_RUN",
platform: "graphql-query",
strategy: getCurrentStrategyID(),
strategy: interceptorService.currentInterceptorID.value!,
})
}

29
packages/hoppscotch-common/src/components/http/Request.vue
View File

@@ -241,17 +241,12 @@ import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
import { useToast } from "@composables/toast"
import { refAutoReset, useVModel } from "@vueuse/core"
import * as E from "fp-ts/Either"
import { isLeft, isRight } from "fp-ts/lib/Either"
import { computed, onBeforeUnmount, ref } from "vue"
import { Ref, computed, onBeforeUnmount, ref } from "vue"
import { defineActionHandler } from "~/helpers/actions"
import { runMutation } from "~/helpers/backend/GQLClient"
import { UpdateRequestDocument } from "~/helpers/backend/graphql"
import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import {
cancelRunningExtensionRequest,
hasExtensionInstalled,
} from "~/helpers/strategies/ExtensionStrategy"
import { runRESTRequest$ } from "~/helpers/RequestRunner"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -270,12 +265,13 @@ import { HoppRESTTab, currentTabID } from "~/helpers/rest/tab"
import { getDefaultRESTRequest } from "~/helpers/rest/default"
import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
import { platform } from "~/platform"
import { getCurrentStrategyID } from "~/helpers/network"
import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
import { useService } from "dioc/vue"
import { InspectionService } from "~/services/inspection"
import { InterceptorService } from "~/services/interceptor.service"
const t = useI18n()
const interceptorService = useService(InterceptorService)
const methods = [
"GET",
@@ -328,6 +324,8 @@ const saveRequestAction = ref<any | null>(null)
const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
const requestCancelFunc: Ref<(() => void) | null> = ref(null)
const userHistories = computed(() => {
return history.value.map((history) => history.request.endpoint).slice(0, 10)
})
@@ -346,13 +344,15 @@ const newSendRequest = async () => {
platform.analytics?.logEvent({
type: "HOPP_REQUEST_RUN",
platform: "rest",
strategy: getCurrentStrategyID(),
strategy: interceptorService.currentInterceptorID.value!,
})
// Double calling is because the function returns a TaskEither than should be executed
const streamResult = await runRESTRequest$(tab)()
const [cancel, streamPromise] = runRESTRequest$(tab)
const streamResult = await streamPromise
if (isRight(streamResult)) {
requestCancelFunc.value = cancel
if (E.isRight(streamResult)) {
subscribeToStream(
streamResult.right,
(responseState) => {
@@ -369,7 +369,7 @@ const newSendRequest = async () => {
loading.value = false
}
)
} else if (isLeft(streamResult)) {
} else {
loading.value = false
toast.error(`${t("error.script_fail")}`)
let error: Error
@@ -419,9 +419,8 @@ function isCURL(curl: string) {
const cancelRequest = () => {
loading.value = false
if (hasExtensionInstalled()) {
cancelRunningExtensionRequest()
}
requestCancelFunc.value?.()
updateRESTResponse(null)
}

39
packages/hoppscotch-common/src/components/interceptors/ExtensionSubtitle.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div
v-if="
interceptorSelection === extensionService.interceptorID &&
extensionService.extensionStatus.value !== 'available'
"
class="flex space-x-2"
>
<HoppButtonSecondary
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
label="Chrome"
outline
class="!flex-1"
/>
<HoppButtonSecondary
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"
label="Firefox"
outline
class="!flex-1"
/>
</div>
</template>
<script setup lang="ts">
import IconChrome from "~icons/brands/chrome"
import IconFirefox from "~icons/brands/firefox"
import { InterceptorService } from "~/services/interceptor.service"
import { useService } from "dioc/vue"
import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
const interceptorService = useService(InterceptorService)
const extensionService = useService(ExtensionInterceptorService)
const interceptorSelection = interceptorService.currentInterceptorID
</script>

88
packages/hoppscotch-common/src/components/settings/Extension.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div class="my-1 text-secondaryLight">
<span v-if="extensionVersion != null">
{{
`${t("settings.extension_version")}: v${extensionVersion.major}.${
extensionVersion.minor
}`
}}
</span>
<span v-else>
{{ t("settings.extension_version") }}:
{{ t("settings.extension_ver_not_reported") }}
</span>
</div>
<div class="flex flex-col py-4 space-y-2">
<span>
<HoppSmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
label="Chrome"
:info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasChromeExtInstalled"
outline
/>
</span>
<span>
<HoppSmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"
label="Firefox"
:info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasFirefoxExtInstalled"
outline
/>
</span>
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<HoppSmartToggle
:on="extensionEnabled"
@change="extensionEnabled = !extensionEnabled"
>
{{ t("settings.extensions_use_toggle") }}
</HoppSmartToggle>
</div>
</div>
</template>
<script setup lang="ts">
import IconChrome from "~icons/brands/chrome"
import IconFirefox from "~icons/brands/firefox"
import IconCheckCircle from "~icons/lucide/check-circle"
import { useI18n } from "@composables/i18n"
import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
import { useService } from "dioc/vue"
import { computed } from "vue"
import { InterceptorService } from "~/services/interceptor.service"
import { platform } from "~/platform"
const t = useI18n()
const interceptorService = useService(InterceptorService)
const extensionService = useService(ExtensionInterceptorService)
const extensionVersion = extensionService.extensionVersion
const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
const extensionEnabled = computed({
get() {
return (
interceptorService.currentInterceptorID.value ===
extensionService.interceptorID
)
},
set(active) {
if (active) {
interceptorService.currentInterceptorID.value =
extensionService.interceptorID
} else {
interceptorService.currentInterceptorID.value =
platform.interceptors.default
}
},
})
</script>

94
packages/hoppscotch-common/src/components/settings/Proxy.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<div class="my-1 text-secondaryLight">
{{ `${t("settings.official_proxy_hosting")} ${t("settings.read_the")}` }}
<HoppSmartAnchor
class="link"
to="https://docs.hoppscotch.io/support/privacy"
blank
:label="t('app.proxy_privacy_policy')"
/>.
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<HoppSmartToggle
:on="proxyEnabled"
@change="proxyEnabled = !proxyEnabled"
>
{{ t("settings.proxy_use_toggle") }}
</HoppSmartToggle>
</div>
</div>
<div class="flex items-center py-4 space-x-2">
<HoppSmartInput
v-model="PROXY_URL"
styles="flex-1"
placeholder=" "
input-styles="input floating-input"
:disabled="!proxyEnabled"
>
<template #label>
<label for="url">
{{ t("settings.proxy_url") }}
</label>
</template>
</HoppSmartInput>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.reset_default')"
:icon="clearIcon"
outline
class="rounded"
@click="resetProxy"
/>
</div>
</template>
<script setup lang="ts">
import { refAutoReset } from "@vueuse/core"
import { useI18n } from "~/composables/i18n"
import { useSetting } from "~/composables/settings"
import IconRotateCCW from "~icons/lucide/rotate-ccw"
import IconCheck from "~icons/lucide/check"
import { useToast } from "~/composables/toast"
import { computed } from "vue"
import { useService } from "dioc/vue"
import { InterceptorService } from "~/services/interceptor.service"
import { proxyInterceptor } from "~/platform/std/interceptors/proxy"
import { platform } from "~/platform"
const t = useI18n()
const toast = useToast()
const interceptorService = useService(InterceptorService)
const PROXY_URL = useSetting("PROXY_URL")
const proxyEnabled = computed({
get() {
return (
interceptorService.currentInterceptorID.value ===
proxyInterceptor.interceptorID
)
},
set(active) {
if (active) {
interceptorService.currentInterceptorID.value =
proxyInterceptor.interceptorID
} else {
interceptorService.currentInterceptorID.value =
platform.interceptors.default
}
},
})
const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
IconRotateCCW,
1000
)
const resetProxy = () => {
PROXY_URL.value = "https://proxy.hoppscotch.io/"
clearIcon.value = IconCheck
toast.success(`${t("state.cleared")}`)
}
</script>

33
packages/hoppscotch-common/src/helpers/GQLConnection.ts
View File

@@ -1,3 +1,4 @@
import * as E from "fp-ts/Either"
import { BehaviorSubject } from "rxjs"
import {
getIntrospectionQuery,
@@ -11,7 +12,8 @@ import {
} from "graphql"
import { distinctUntilChanged, map } from "rxjs/operators"
import { GQLHeader, HoppGQLAuth } from "@hoppscotch/data"
import { sendNetworkRequest } from "./network"
import { getService } from "~/modules/dioc"
import { InterceptorService } from "~/services/interceptor.service"
const GQL_SCHEMA_POLL_INTERVAL = 7000
@@ -181,7 +183,7 @@ export class GQLConnection {
headers.forEach((x) => (finalHeaders[x.key] = x.value))
const reqOptions = {
method: "POST",
method: "POST" as const,
url,
headers: {
...finalHeaders,
@@ -190,11 +192,20 @@ export class GQLConnection {
data: introspectionQuery,
}
const data = await sendNetworkRequest(reqOptions)
const interceptorService = getService(InterceptorService)
const res = await interceptorService.runRequest(reqOptions).response
if (E.isLeft(res)) {
console.error(res.left)
throw new Error(res.left.toString())
}
const data = res.right
// HACK : Temporary trailing null character issue from the extension fix
const response = new TextDecoder("utf-8")
.decode(data.data)
.decode(data.data as any)
.replace(/\0+$/, "")
const introspectResponse = JSON.parse(response)
@@ -245,7 +256,7 @@ export class GQLConnection {
.forEach(({ key, value }) => (finalHeaders[key] = value))
const reqOptions = {
method: "POST",
method: "POST" as const,
url,
headers: {
...finalHeaders,
@@ -260,11 +271,19 @@ export class GQLConnection {
},
}
const res = await sendNetworkRequest(reqOptions)
const interceptorService = getService(InterceptorService)
const result = await interceptorService.runRequest(reqOptions).response
if (E.isLeft(result)) {
console.error(result.left)
throw new Error(result.left.toString())
}
const res = result.right
// HACK: Temporary trailing null character issue from the extension fix
const responseText = new TextDecoder("utf-8")
.decode(res.data)
.decode(res.data as any)
.replace(/\0+$/, "")
return responseText

205
packages/hoppscotch-common/src/helpers/RequestRunner.ts
View File

@@ -1,6 +1,5 @@
import { Observable, Subject } from "rxjs"
import { filter } from "rxjs/operators"
import * as TE from "fp-ts/lib/TaskEither"
import { flow, pipe } from "fp-ts/function"
import * as O from "fp-ts/Option"
import * as A from "fp-ts/Array"
@@ -10,7 +9,7 @@ import {
runTestScript,
TestDescriptor,
} from "@hoppscotch/js-sandbox"
import { isRight } from "fp-ts/Either"
import * as E from "fp-ts/Either"
import { cloneDeep } from "lodash-es"
import {
getCombinedEnvVariables,
@@ -69,106 +68,130 @@ export const executedResponses$ = new Subject<
HoppRESTResponse & { type: "success" | "fail " }
>()
export const runRESTRequest$ = (
export function runRESTRequest$(
tab: Ref<HoppRESTTab>
): TE.TaskEither<string | Error, Observable<HoppRESTResponse>> =>
pipe(
getFinalEnvsFromPreRequest(
tab.value.document.request.preRequestScript,
getCombinedEnvVariables()
),
TE.chain((envs) => {
const effectiveRequest = getEffectiveRESTRequest(
tab.value.document.request,
{
name: "Env",
variables: combineEnvVariables(envs),
}
)
): [
() => void,
Promise<
| E.Left<"script_fail" | "cancellation">
| E.Right<Observable<HoppRESTResponse>>
>
] {
let cancelCalled = false
let cancelFunc: (() => void) | null = null
const stream = createRESTNetworkRequestStream(effectiveRequest)
const cancel = () => {
cancelCalled = true
cancelFunc?.()
}
// Run Test Script when request ran successfully
const subscription = stream
.pipe(filter((res) => res.type === "success" || res.type === "fail"))
.subscribe(async (res) => {
if (res.type === "success" || res.type === "fail") {
executedResponses$.next(
// @ts-expect-error Typescript can't figure out this inference for some reason
res
)
const res = getFinalEnvsFromPreRequest(
tab.value.document.request.preRequestScript,
getCombinedEnvVariables()
)().then((envs) => {
if (cancelCalled) return E.left("cancellation" as const)
const runResult = await runTestScript(res.req.testScript, envs, {
if (E.isLeft(envs)) {
console.error(envs.left)
return E.left("script_fail" as const)
}
const effectiveRequest = getEffectiveRESTRequest(
tab.value.document.request,
{
name: "Env",
variables: combineEnvVariables(envs.right),
}
)
const [stream, cancelRun] = createRESTNetworkRequestStream(effectiveRequest)
cancelFunc = cancelRun
const subscription = stream
.pipe(filter((res) => res.type === "success" || res.type === "fail"))
.subscribe(async (res) => {
if (res.type === "success" || res.type === "fail") {
executedResponses$.next(
// @ts-expect-error Typescript can't figure out this inference for some reason
res
)
const runResult = await runTestScript(
res.req.testScript,
envs.right,
{
status: res.statusCode,
body: getTestableBody(res),
headers: res.headers,
})()
if (isRight(runResult)) {
tab.value.testResults = translateToSandboxTestResults(
runResult.right
)
setGlobalEnvVariables(runResult.right.envs.global)
if (
environmentsStore.value.selectedEnvironmentIndex.type ===
"MY_ENV"
) {
const env = getEnvironment({
type: "MY_ENV",
index: environmentsStore.value.selectedEnvironmentIndex.index,
})
updateEnvironment(
environmentsStore.value.selectedEnvironmentIndex.index,
{
...env,
variables: runResult.right.envs.selected,
}
)
} else if (
environmentsStore.value.selectedEnvironmentIndex.type ===
"TEAM_ENV"
) {
const env = getEnvironment({
type: "TEAM_ENV",
})
pipe(
updateTeamEnvironment(
JSON.stringify(runResult.right.envs.selected),
environmentsStore.value.selectedEnvironmentIndex.teamEnvID,
env.name
)
)()
}
} else {
tab.value.testResults = {
description: "",
expectResults: [],
tests: [],
envDiff: {
global: {
additions: [],
deletions: [],
updations: [],
},
selected: {
additions: [],
deletions: [],
updations: [],
},
},
scriptError: true,
}
}
)()
subscription.unsubscribe()
if (E.isRight(runResult)) {
tab.value.testResults = translateToSandboxTestResults(
runResult.right
)
setGlobalEnvVariables(runResult.right.envs.global)
if (
environmentsStore.value.selectedEnvironmentIndex.type === "MY_ENV"
) {
const env = getEnvironment({
type: "MY_ENV",
index: environmentsStore.value.selectedEnvironmentIndex.index,
})
updateEnvironment(
environmentsStore.value.selectedEnvironmentIndex.index,
{
...env,
variables: runResult.right.envs.selected,
}
)
} else if (
environmentsStore.value.selectedEnvironmentIndex.type ===
"TEAM_ENV"
) {
const env = getEnvironment({
type: "TEAM_ENV",
})
pipe(
updateTeamEnvironment(
JSON.stringify(runResult.right.envs.selected),
environmentsStore.value.selectedEnvironmentIndex.teamEnvID,
env.name
)
)()
}
} else {
tab.value.testResults = {
description: "",
expectResults: [],
tests: [],
envDiff: {
global: {
additions: [],
deletions: [],
updations: [],
},
selected: {
additions: [],
deletions: [],
updations: [],
},
},
scriptError: true,
}
}
})
return TE.right(stream)
})
)
subscription.unsubscribe()
}
})
return E.right(stream)
})
return [cancel, res]
}
const getAddedEnvVariables = (
current: Environment["variables"],

222
packages/hoppscotch-common/src/helpers/network.ts
View File

@@ -1,189 +1,107 @@
import { AxiosResponse, AxiosRequestConfig } from "axios"
import { AxiosRequestConfig } from "axios"
import { BehaviorSubject, Observable } from "rxjs"
import { cloneDeep } from "lodash-es"
import * as T from "fp-ts/Task"
import * as E from "fp-ts/Either"
import * as TE from "fp-ts/TaskEither"
import { pipe } from "fp-ts/function"
import AxiosStrategy, {
cancelRunningAxiosRequest,
} from "./strategies/AxiosStrategy"
import ExtensionStrategy, {
cancelRunningExtensionRequest,
hasExtensionInstalled,
} from "./strategies/ExtensionStrategy"
import { HoppRESTResponse } from "./types/HoppRESTResponse"
import { EffectiveHoppRESTRequest } from "./utils/EffectiveURL"
import { settingsStore } from "~/newstore/settings"
export type NetworkResponse = AxiosResponse<any> & {
config?: {
timeData?: {
startTime: number
endTime: number
}
}
}
import { getService } from "~/modules/dioc"
import {
InterceptorService,
NetworkResponse,
} from "~/services/interceptor.service"
export type NetworkStrategy = (
req: AxiosRequestConfig
) => TE.TaskEither<any, NetworkResponse>
export const cancelRunningRequest = () => {
if (isExtensionsAllowed() && hasExtensionInstalled()) {
cancelRunningExtensionRequest()
} else {
cancelRunningAxiosRequest()
}
// TODO: Implement
}
const isExtensionsAllowed = () => settingsStore.value.EXTENSIONS_ENABLED
const runAppropriateStrategy = (req: AxiosRequestConfig) => {
if (isExtensionsAllowed() && hasExtensionInstalled()) {
return ExtensionStrategy(req)
}
return AxiosStrategy(req)
}
/**
* Returns an identifier for how a request will be ran
* if the system is asked to fire a request
*
*/
export function getCurrentStrategyID() {
if (isExtensionsAllowed() && hasExtensionInstalled()) {
return "extension" as const
} else if (settingsStore.value.PROXY_ENABLED) {
return "proxy" as const
} else {
return "normal" as const
}
}
export const sendNetworkRequest = (req: any) =>
pipe(
runAppropriateStrategy(req),
TE.getOrElse((e) => {
throw e
})
)()
const processResponse = (
function processResponse(
res: NetworkResponse,
req: EffectiveHoppRESTRequest,
backupTimeStart: number,
backupTimeEnd: number,
successState: HoppRESTResponse["type"]
) =>
pipe(
TE.Do,
) {
const contentLength = res.headers["content-length"]
? parseInt(res.headers["content-length"])
: (res.data as ArrayBuffer).byteLength
// Calculate the content length
TE.bind("contentLength", () =>
TE.of(
res.headers["content-length"]
? parseInt(res.headers["content-length"])
: (res.data as ArrayBuffer).byteLength
)
),
// Building the final response object
TE.map(
({ contentLength }) =>
<HoppRESTResponse>{
type: successState,
statusCode: res.status,
body: res.data,
headers: Object.keys(res.headers).map((x) => ({
key: x,
value: res.headers[x],
})),
meta: {
responseSize: contentLength,
responseDuration: backupTimeEnd - backupTimeStart,
},
req,
}
)
)
return <HoppRESTResponse>{
type: successState,
statusCode: res.status,
body: res.data,
headers: Object.keys(res.headers).map((x) => ({
key: x,
value: res.headers[x],
})),
meta: {
responseSize: contentLength,
responseDuration: backupTimeEnd - backupTimeStart,
},
req,
}
}
export function createRESTNetworkRequestStream(
request: EffectiveHoppRESTRequest
): Observable<HoppRESTResponse> {
): [Observable<HoppRESTResponse>, () => void] {
const response = new BehaviorSubject<HoppRESTResponse>({
type: "loading",
req: request,
})
pipe(
TE.Do,
const req = cloneDeep(request)
// Get a deep clone of the request
TE.bind("req", () => TE.of(cloneDeep(request))),
const headers = req.effectiveFinalHeaders.reduce((acc, { key, value }) => {
return Object.assign(acc, { [key]: value })
}, {})
// Assembling headers object
TE.bind("headers", ({ req }) =>
TE.of(
req.effectiveFinalHeaders.reduce((acc, { key, value }) => {
return Object.assign(acc, { [key]: value })
}, {})
const params = new URLSearchParams()
for (const param of req.effectiveFinalParams) {
params.append(param.key, param.value)
}
const backupTimeStart = Date.now()
const service = getService(InterceptorService)
const res = service.runRequest({
method: req.method as any,
url: req.effectiveFinalURL.trim(),
headers,
params,
data: req.effectiveFinalBody,
})
res.response.then((res) => {
const backupTimeEnd = Date.now()
if (E.isRight(res)) {
const processedRes = processResponse(
res.right,
req,
backupTimeStart,
backupTimeEnd,
"success"
)
),
// Assembling params object
TE.bind("params", ({ req }) => {
const params = new URLSearchParams()
req.effectiveFinalParams.forEach((x) => {
params.append(x.key, x.value)
})
return TE.of(params)
}),
// Keeping the backup start time
TE.bind("backupTimeStart", () => TE.of(Date.now())),
// Running the request and getting the response
TE.bind("res", ({ req, headers, params }) =>
runAppropriateStrategy({
method: req.method as any,
url: req.effectiveFinalURL.trim(),
headers,
params,
data: req.effectiveFinalBody,
})
),
// Getting the backup end time
TE.bind("backupTimeEnd", () => TE.of(Date.now())),
// Assemble the final response object
TE.chainW(({ req, res, backupTimeEnd, backupTimeStart }) =>
processResponse(res, req, backupTimeStart, backupTimeEnd, "success")
),
// Writing success state to the stream
TE.chain((res) => {
response.next(res)
response.next(processedRes)
response.complete()
return TE.of(res)
}),
return
}
// Package the error type
TE.getOrElseW((e) => {
const obj: HoppRESTResponse = {
type: "network_fail",
error: e,
req: request,
}
response.next(obj)
response.complete()
return T.of(obj)
response.next({
type: "network_fail",
req,
error: res.left,
})
)()
response.complete()
})
return response
return [response, () => res.cancel()]
}

163
packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts
View File

@@ -1,163 +0,0 @@
import axios, { AxiosRequestConfig } from "axios"
import { v4 } from "uuid"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
import { cloneDeep } from "lodash-es"
import { NetworkResponse, NetworkStrategy } from "../network"
import { decodeB64StringToArrayBuffer } from "../utils/b64"
import { settingsStore } from "~/newstore/settings"
let cancelSource = axios.CancelToken.source()
type ProxyHeaders = {
"multipart-part-key"?: string
}
type ProxyPayloadType = FormData | (AxiosRequestConfig & { wantsBinary: true })
export const cancelRunningAxiosRequest = () => {
cancelSource.cancel()
// Create a new cancel token
cancelSource = axios.CancelToken.source()
}
const getProxyPayload = (
req: AxiosRequestConfig,
multipartKey: string | null
) => {
let payload: ProxyPayloadType = {
...req,
wantsBinary: true,
accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
}
if (payload.data instanceof FormData) {
const formData = payload.data
payload.data = ""
formData.append(multipartKey!, JSON.stringify(payload))
payload = formData
}
return payload
}
const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
const reqClone = cloneDeep(req)
// If the parameters are URLSearchParams, inject them to URL instead
// This prevents issues of marshalling the URLSearchParams to the proxy
if (reqClone.params instanceof URLSearchParams) {
try {
const url = new URL(reqClone.url ?? "")
for (const [key, value] of reqClone.params.entries()) {
url.searchParams.append(key, value)
}
reqClone.url = url.toString()
} catch (e) {
// making this a non-empty block, so we can make the linter happy.
// we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
}
reqClone.params = {}
}
return reqClone
}
const axiosWithProxy: NetworkStrategy = (req) =>
pipe(
TE.Do,
TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
// If the request has FormData, the proxy needs a key
TE.bind("multipartKey", ({ processedReq }) =>
TE.of(
processedReq.data instanceof FormData
? `proxyRequestData-${v4()}`
: null
)
),
// Build headers to send
TE.bind("headers", ({ processedReq, multipartKey }) =>
TE.of(
processedReq.data instanceof FormData
? <ProxyHeaders>{
"multipart-part-key": multipartKey,
}
: <ProxyHeaders>{}
)
),
// Create payload
TE.bind("payload", ({ processedReq, multipartKey }) =>
TE.of(getProxyPayload(processedReq, multipartKey))
),
// Run the proxy request
TE.chain(({ payload, headers }) =>
TE.tryCatch(
() =>
axios.post(
settingsStore.value.PROXY_URL || "https://proxy.hoppscotch.io",
payload,
{
headers,
cancelToken: cancelSource.token,
}
),
(reason) =>
axios.isCancel(reason)
? "cancellation" // Convert cancellation errors into cancellation strings
: reason
)
),
// Check success predicate
TE.chain(
TE.fromPredicate(
({ data }) => data.success,
({ data }) => data.data.message || "Proxy Error"
)
),
// Process Base64
TE.chain(({ data }) => {
if (data.isBinary) {
data.data = decodeB64StringToArrayBuffer(data.data)
}
return TE.of(data)
})
)
const axiosWithoutProxy: NetworkStrategy = (req) =>
pipe(
TE.tryCatch(
() =>
axios({
...req,
cancelToken: (cancelSource && cancelSource.token) || "",
responseType: "arraybuffer",
}),
(e) => (axios.isCancel(e) ? "cancellation" : (e as any))
),
TE.orElse((e) =>
e !== "cancellation" && e.response
? TE.right(e.response as NetworkResponse)
: TE.left(e)
)
)
const axiosStrategy: NetworkStrategy = (req) =>
pipe(
req,
settingsStore.value.PROXY_ENABLED ? axiosWithProxy : axiosWithoutProxy
)
export default axiosStrategy

128
packages/hoppscotch-common/src/helpers/strategies/ExtensionStrategy.ts
View File

@@ -1,128 +0,0 @@
import * as TE from "fp-ts/TaskEither"
import * as O from "fp-ts/Option"
import { pipe } from "fp-ts/function"
import { AxiosRequestConfig } from "axios"
import { cloneDeep } from "lodash-es"
import { NetworkResponse, NetworkStrategy } from "../network"
import { browserIsChrome, browserIsFirefox } from "../utils/userAgent"
export const hasExtensionInstalled = () =>
typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined"
export const hasChromeExtensionInstalled = () =>
hasExtensionInstalled() && browserIsChrome()
export const hasFirefoxExtensionInstalled = () =>
hasExtensionInstalled() && browserIsFirefox()
export const cancelRunningExtensionRequest = () => {
window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRequest()
}
export const defineSubscribableObject = <T extends object>(obj: T) => {
const proxyObject = {
...obj,
_subscribers: {} as {
// eslint-disable-next-line no-unused-vars
[key in keyof T]?: ((...args: any[]) => any)[]
},
subscribe(prop: keyof T, func: (...args: any[]) => any): void {
if (Array.isArray(this._subscribers[prop])) {
this._subscribers[prop]?.push(func)
} else {
this._subscribers[prop] = [func]
}
},
}
type SubscribableProxyObject = typeof proxyObject
return new Proxy(proxyObject, {
set(obj, prop, newVal) {
obj[prop as keyof SubscribableProxyObject] = newVal
const currentSubscribers = obj._subscribers[prop as keyof T]
if (Array.isArray(currentSubscribers)) {
for (const subscriber of currentSubscribers) {
subscriber(newVal)
}
}
return true
},
})
}
const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
const reqClone = cloneDeep(req)
// If the parameters are URLSearchParams, inject them to URL instead
// This prevents marshalling issues with structured cloning of URLSearchParams
if (reqClone.params instanceof URLSearchParams) {
try {
const url = new URL(reqClone.url ?? "")
for (const [key, value] of reqClone.params.entries()) {
url.searchParams.append(key, value)
}
reqClone.url = url.toString()
} catch (e) {
// making this a non-empty block, so we can make the linter happy.
// we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
}
reqClone.params = {}
}
return reqClone
}
const extensionStrategy: NetworkStrategy = (req) =>
pipe(
TE.Do,
TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
// Storeing backup timing data in case the extension does not have that info
TE.bind("backupTimeDataStart", () => TE.of(new Date().getTime())),
// Run the request
TE.bind("response", ({ processedReq }) =>
pipe(
window.__POSTWOMAN_EXTENSION_HOOK__,
O.fromNullable,
TE.fromOption(() => "NO_PW_EXT_HOOK" as const),
TE.chain((extensionHook) =>
TE.tryCatch(
() =>
extensionHook.sendRequest({
...processedReq,
wantsBinary: true,
}),
(err) => err as any
)
)
)
),
// Inject backup time data if not present
TE.map(({ backupTimeDataStart, response }) => ({
...response,
config: {
timeData: {
startTime: backupTimeDataStart,
endTime: new Date().getTime(),
},
...response.config,
},
})),
TE.orElse((e) =>
e !== "cancellation" && e.response
? TE.right(e.response as NetworkResponse)
: TE.left(e)
)
)
export default extensionStrategy

76
packages/hoppscotch-common/src/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js
View File

@@ -1,76 +0,0 @@
import { vi, describe, expect, test } from "vitest"
import axios from "axios"
import axiosStrategy from "../AxiosStrategy"
vi.mock("axios")
vi.mock("~/newstore/settings", () => {
return {
__esModule: true,
settingsStore: {
value: {
PROXY_ENABLED: false,
},
},
}
})
axios.CancelToken.source.mockReturnValue({ token: "test" })
axios.mockResolvedValue({})
describe("axiosStrategy", () => {
describe("No-Proxy Requests", () => {
test("sends request to the actual sender if proxy disabled", async () => {
await axiosStrategy({ url: "test" })()
expect(axios).toBeCalledWith(
expect.objectContaining({
url: "test",
})
)
})
test("asks axios to return data as arraybuffer", async () => {
await axiosStrategy({ url: "test" })()
expect(axios).toBeCalledWith(
expect.objectContaining({
responseType: "arraybuffer",
})
)
})
test("resolves successful requests", async () => {
expect(await axiosStrategy({})()).toBeRight()
})
test("rejects cancel errors with text 'cancellation'", async () => {
axios.isCancel.mockReturnValueOnce(true)
axios.mockRejectedValue("err")
expect(await axiosStrategy({})()).toEqualLeft("cancellation")
})
test("rejects non-cancellation errors as-is", async () => {
axios.isCancel.mockReturnValueOnce(false)
axios.mockRejectedValue("err")
expect(await axiosStrategy({})()).toEqualLeft("err")
})
test("non-cancellation errors that have response data are right", async () => {
const errorResponse = { error: "errr" }
axios.isCancel.mockReturnValueOnce(false)
axios.mockRejectedValue({
response: {
data: Buffer.from(JSON.stringify(errorResponse), "utf8").toString(
"base64"
),
},
})
expect(await axiosStrategy({})()).toSubsetEqualRight({
data: "eyJlcnJvciI6ImVycnIifQ==",
})
})
})
})

145
packages/hoppscotch-common/src/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js
View File

@@ -1,145 +0,0 @@
import { describe, test, expect, vi } from "vitest"
import axios from "axios"
import axiosStrategy from "../AxiosStrategy"
vi.mock("../../utils/b64", () => ({
__esModule: true,
decodeB64StringToArrayBuffer: vi.fn((data) => `${data}-converted`),
}))
vi.mock("~/newstore/settings", () => {
return {
__esModule: true,
settingsStore: {
value: {
PROXY_ENABLED: true,
PROXY_URL: "test",
},
},
}
})
describe("axiosStrategy", () => {
describe("Proxy Requests", () => {
test("sends POST request to proxy if proxy is enabled", async () => {
let passedURL
vi.spyOn(axios, "post").mockImplementation((url) => {
passedURL = url
return Promise.resolve({ data: { success: true, isBinary: false } })
})
await axiosStrategy({})()
expect(passedURL).toEqual("test")
})
test("passes request fields to axios properly", async () => {
const reqFields = {
testA: "testA",
testB: "testB",
testC: "testC",
}
let passedFields
vi.spyOn(axios, "post").mockImplementation((_url, req) => {
passedFields = req
return Promise.resolve({ data: { success: true, isBinary: false } })
})
await axiosStrategy(reqFields)()
expect(passedFields).toMatchObject(reqFields)
})
test("passes wantsBinary field", async () => {
let passedFields
vi.spyOn(axios, "post").mockImplementation((_url, req) => {
passedFields = req
return Promise.resolve({ data: { success: true, isBinary: false } })
})
await axiosStrategy({})()
expect(passedFields).toHaveProperty("wantsBinary")
})
test("checks for proxy response success field and throws error message for non-success", async () => {
vi.spyOn(axios, "post").mockResolvedValue({
data: {
success: false,
data: {
message: "test message",
},
},
})
expect(await axiosStrategy({})()).toEqualLeft("test message")
})
test("checks for proxy response success field and throws error 'Proxy Error' for non-success", async () => {
vi.spyOn(axios, "post").mockResolvedValue({
data: {
success: false,
data: {},
},
})
expect(await axiosStrategy({})()).toBeLeft("Proxy Error")
})
test("checks for proxy response success and doesn't left for success", async () => {
vi.spyOn(axios, "post").mockResolvedValue({
data: {
success: true,
data: {},
},
})
expect(await axiosStrategy({})()).toBeRight()
})
test("checks isBinary response field and right with the converted value if so", async () => {
vi.spyOn(axios, "post").mockResolvedValue({
data: {
success: true,
isBinary: true,
data: "testdata",
},
})
expect(await axiosStrategy({})()).toSubsetEqualRight({
data: "testdata-converted",
})
})
test("checks isBinary response field and right with the actual value if not so", async () => {
vi.spyOn(axios, "post").mockResolvedValue({
data: {
success: true,
isBinary: false,
data: "testdata",
},
})
expect(await axiosStrategy({})()).toSubsetEqualRight({
data: "testdata",
})
})
test("cancel errors are returned a left with the string 'cancellation'", async () => {
vi.spyOn(axios, "post").mockRejectedValue("errr")
vi.spyOn(axios, "isCancel").mockReturnValueOnce(true)
expect(await axiosStrategy({})()).toEqualLeft("cancellation")
})
test("non-cancellation errors return a left", async () => {
vi.spyOn(axios, "post").mockRejectedValue("errr")
vi.spyOn(axios, "isCancel").mockReturnValueOnce(false)
expect(await axiosStrategy({})()).toEqualLeft("errr")
})
})
})

212
packages/hoppscotch-common/src/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
View File

@@ -1,212 +0,0 @@
import { vi, describe, expect, test, beforeEach } from "vitest"
import extensionStrategy, {
hasExtensionInstalled,
hasChromeExtensionInstalled,
hasFirefoxExtensionInstalled,
cancelRunningExtensionRequest,
} from "../ExtensionStrategy"
vi.mock("../../utils/b64", () => ({
__esModule: true,
decodeB64StringToArrayBuffer: vi.fn((data) => `${data}-converted`),
}))
vi.mock("~/newstore/settings", () => {
return {
__esModule: true,
settingsStore: {
value: {
EXTENSIONS_ENABLED: true,
PROXY_ENABLED: false,
},
},
}
})
describe("hasExtensionInstalled", () => {
test("returns true if extension is present and hooked", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {}
expect(hasExtensionInstalled()).toEqual(true)
})
test("returns false if extension not present or not hooked", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
expect(hasExtensionInstalled()).toEqual(false)
})
})
describe("hasChromeExtensionInstalled", () => {
test("returns true if extension is hooked and browser is chrome", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {}
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
expect(hasChromeExtensionInstalled()).toEqual(true)
})
test("returns false if extension is hooked and browser is not chrome", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {}
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
expect(hasChromeExtensionInstalled()).toEqual(false)
})
test("returns false if extension not installed and browser is chrome", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
expect(hasChromeExtensionInstalled()).toEqual(false)
})
test("returns false if extension not installed and browser is not chrome", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
expect(hasChromeExtensionInstalled()).toEqual(false)
})
})
describe("hasFirefoxExtensionInstalled", () => {
test("returns true if extension is hooked and browser is firefox", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {}
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
expect(hasFirefoxExtensionInstalled()).toEqual(true)
})
test("returns false if extension is hooked and browser is not firefox", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {}
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
expect(hasFirefoxExtensionInstalled()).toEqual(false)
})
test("returns false if extension not installed and browser is firefox", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
expect(hasFirefoxExtensionInstalled()).toEqual(false)
})
test("returns false if extension not installed and browser is not firefox", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
expect(hasFirefoxExtensionInstalled()).toEqual(false)
})
})
describe("cancelRunningExtensionRequest", () => {
const cancelFunc = vi.fn()
beforeEach(() => {
cancelFunc.mockClear()
})
test("cancels request if extension installed and function present in hook", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {
cancelRequest: cancelFunc,
}
cancelRunningExtensionRequest()
expect(cancelFunc).toHaveBeenCalledTimes(1)
})
test("does not cancel request if extension not installed", () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
cancelRunningExtensionRequest()
expect(cancelFunc).not.toHaveBeenCalled()
})
})
describe("extensionStrategy", () => {
const sendReqFunc = vi.fn()
beforeEach(() => {
sendReqFunc.mockClear()
})
describe("Non-Proxy Requests", () => {
test("ask extension to send request", async () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {
sendRequest: sendReqFunc,
}
sendReqFunc.mockResolvedValue({
data: '{"success":true,"data":""}',
})
await extensionStrategy({})()
expect(sendReqFunc).toHaveBeenCalledTimes(1)
})
test("sends request to the actual sender if proxy disabled", async () => {
let passedUrl
global.__POSTWOMAN_EXTENSION_HOOK__ = {
sendRequest: sendReqFunc,
}
sendReqFunc.mockImplementation(({ url }) => {
passedUrl = url
return Promise.resolve({
data: '{"success":true,"data":""}',
})
})
await extensionStrategy({ url: "test" })()
expect(passedUrl).toEqual("test")
})
test("asks extension to get binary data", async () => {
let passedFields
global.__POSTWOMAN_EXTENSION_HOOK__ = {
sendRequest: sendReqFunc,
}
sendReqFunc.mockImplementation((fields) => {
passedFields = fields
return Promise.resolve({
data: '{"success":true,"data":""}',
})
})
await extensionStrategy({})()
expect(passedFields).toHaveProperty("wantsBinary")
})
test("rights successful requests", async () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {
sendRequest: sendReqFunc,
}
sendReqFunc.mockResolvedValue({
data: '{"success":true,"data":""}',
})
expect(await extensionStrategy({})()).toBeRight()
})
test("rejects errors as-is", async () => {
global.__POSTWOMAN_EXTENSION_HOOK__ = {
sendRequest: sendReqFunc,
}
sendReqFunc.mockRejectedValue("err")
expect(await extensionStrategy({})()).toEqualLeft("err")
})
})
})

2
packages/hoppscotch-common/src/helpers/types/HoppRESTResponse.ts
View File

@@ -19,7 +19,7 @@ export type HoppRESTResponse =
}
| {
type: "network_fail"
error: Error
error: unknown
req: HoppRESTRequest
}

58
packages/hoppscotch-common/src/modules/hoppExtension.ts
View File

@@ -1,58 +0,0 @@
import { HoppModule } from "."
import {
changeExtensionStatus,
ExtensionStatus,
} from "~/newstore/HoppExtension"
import { ref } from "vue"
import { defineSubscribableObject } from "~/helpers/strategies/ExtensionStrategy"
/* Module defining the hooking mechanism between Hoppscotch and the Hoppscotch Browser Extension */
export default <HoppModule>{
onVueAppInit() {
const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
if (window.__HOPP_EXTENSION_STATUS_PROXY__) {
changeExtensionStatus(window.__HOPP_EXTENSION_STATUS_PROXY__.status)
window.__HOPP_EXTENSION_STATUS_PROXY__.subscribe(
"status",
(status: ExtensionStatus) => changeExtensionStatus(status)
)
} else {
const statusProxy = defineSubscribableObject({
status: "waiting" as ExtensionStatus,
})
window.__HOPP_EXTENSION_STATUS_PROXY__ = statusProxy
statusProxy.subscribe("status", (status: ExtensionStatus) =>
changeExtensionStatus(status)
)
/**
* Keeping identifying extension backward compatible
* We are assuming the default version is 0.24 or later. So if the extension exists, its identified immediately,
* then we use a poll to find the version, this will get the version for 0.24 and any other version
* of the extension, but will have a slight lag.
* 0.24 users will get the benefits of 0.24, while the extension won't break for the old users
*/
extensionPollIntervalId.value = setInterval(() => {
if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
if (extensionPollIntervalId.value)
clearInterval(extensionPollIntervalId.value)
const version = window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
// When the version is not 0.24 or higher, the extension wont do this. so we have to do it manually
if (
version.major === 0 &&
version.minor <= 23 &&
window.__HOPP_EXTENSION_STATUS_PROXY__
) {
window.__HOPP_EXTENSION_STATUS_PROXY__.status = "available"
}
}
}, 2000)
}
},
}

46
packages/hoppscotch-common/src/modules/interceptors.ts Normal file
View File

@@ -0,0 +1,46 @@
import { InterceptorService } from "~/services/interceptor.service"
import { HoppModule } from "."
import { getService } from "./dioc"
import { platform } from "~/platform"
import { watch } from "vue"
import { applySetting } from "~/newstore/settings"
import { useSettingStatic } from "~/composables/settings"
export default <HoppModule>{
onVueAppInit() {
const interceptorService = getService(InterceptorService)
for (const interceptorDef of platform.interceptors.interceptors) {
if (interceptorDef.type === "standalone") {
interceptorService.registerInterceptor(interceptorDef.interceptor)
} else {
const service = getService(interceptorDef.service)
interceptorService.registerInterceptor(service)
}
}
interceptorService.currentInterceptorID.value =
platform.interceptors.default
watch(interceptorService.currentInterceptorID, (id) => {
applySetting(
"CURRENT_INTERCEPTOR_ID",
id ?? platform.interceptors.default
)
})
const [setting] = useSettingStatic("CURRENT_INTERCEPTOR_ID")
watch(
setting,
() => {
interceptorService.currentInterceptorID.value =
setting.value ?? platform.interceptors.default
},
{
immediate: true,
}
)
},
}

13
packages/hoppscotch-common/src/newstore/localpersistence.ts
View File

@@ -9,10 +9,11 @@ import {
import {
settingsStore,
bulkApplySettings,
defaultSettings,
getDefaultSettings,
applySetting,
HoppAccentColor,
HoppBgColor,
performSettingsDataMigrations,
} from "./settings"
import {
restHistoryStore,
@@ -80,7 +81,7 @@ function checkAndMigrateOldSettings() {
const { postwoman } = vuexData
if (!isEmpty(postwoman?.settings)) {
const settingsData = assign(clone(defaultSettings), postwoman.settings)
const settingsData = assign(clone(getDefaultSettings()), postwoman.settings)
window.localStorage.setItem("settings", JSON.stringify(settingsData))
@@ -150,8 +151,12 @@ function setupSettingsPersistence() {
window.localStorage.getItem("settings") || "{}"
)
if (settingsData) {
bulkApplySettings(settingsData)
const updatedSettings = settingsData
? performSettingsDataMigrations(settingsData)
: settingsData
if (updatedSettings) {
bulkApplySettings(updatedSettings)
}
settingsStore.subject$.subscribe((settings) => {

61
packages/hoppscotch-common/src/newstore/settings.ts
View File

@@ -1,5 +1,5 @@
import { pluck, distinctUntilChanged } from "rxjs/operators"
import { has } from "lodash-es"
import { cloneDeep, defaultsDeep, has } from "lodash-es"
import { Observable } from "rxjs"
import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
@@ -32,9 +32,10 @@ export type SettingsDef = {
syncHistory: boolean
syncEnvironments: boolean
PROXY_ENABLED: boolean
PROXY_URL: string
EXTENSIONS_ENABLED: boolean
CURRENT_INTERCEPTOR_ID: string
URL_EXCLUDES: {
auth: boolean
httpUser: boolean
@@ -53,14 +54,15 @@ export type SettingsDef = {
COLUMN_LAYOUT: boolean
}
export const defaultSettings: SettingsDef = {
export const getDefaultSettings = (): SettingsDef => ({
syncCollections: true,
syncHistory: true,
syncEnvironments: true,
PROXY_ENABLED: false,
CURRENT_INTERCEPTOR_ID: "browser", // TODO: Allow the platform definition to take this place
// TODO: Interceptor related settings should move under the interceptor systems
PROXY_URL: "https://proxy.hoppscotch.io/",
EXTENSIONS_ENABLED: false,
URL_EXCLUDES: {
auth: true,
httpUser: true,
@@ -77,7 +79,7 @@ export const defaultSettings: SettingsDef = {
ZEN_MODE: false,
FONT_SIZE: "small",
COLUMN_LAYOUT: true,
}
})
type ApplySettingPayload = {
[K in keyof SettingsDef]: {
@@ -86,8 +88,6 @@ type ApplySettingPayload = {
}
}[keyof SettingsDef]
const validKeys = Object.keys(defaultSettings)
const dispatchers = defineDispatchers({
bulkApplySettings(_currentState: SettingsDef, payload: Partial<SettingsDef>) {
return payload
@@ -112,13 +112,6 @@ const dispatchers = defineDispatchers({
_currentState: SettingsDef,
{ settingKey, value }: ApplySettingPayload
) {
if (!validKeys.includes(settingKey)) {
// console.log(
// `Ignoring non-existent setting key '${settingKey}' assignment`
// )
return {}
}
const result: Partial<SettingsDef> = {
[settingKey]: value,
}
@@ -127,7 +120,10 @@ const dispatchers = defineDispatchers({
},
})
export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
export const settingsStore = new DispatchingStore(
getDefaultSettings(),
dispatchers
)
/**
* An observable value to make avail all the state information at once
@@ -156,16 +152,39 @@ export function toggleSetting(settingKey: KeysMatching<SettingsDef, boolean>) {
})
}
export function applySetting<K extends ApplySettingPayload>(
settingKey: K["settingKey"],
value: K["value"]
export function applySetting<K extends keyof SettingsDef>(
settingKey: K,
value: SettingsDef[K]
) {
settingsStore.dispatch({
dispatcher: "applySetting",
// @ts-expect-error TS is not able to understand the type semantics here
payload: {
// @ts-expect-error TS is not able to understand the type semantics here
settingKey,
// @ts-expect-error TS is not able to understand the type semantics here
value,
},
})
}
export function performSettingsDataMigrations(data: any): SettingsDef {
const source = cloneDeep(data)
if (source["EXTENSIONS_ENABLED"]) {
const result = JSON.parse(source["EXTENSIONS_ENABLED"])
if (result) source["CURRENT_INTERCEPTOR_ID"] = "extension"
delete source["EXTENSIONS_ENABLED"]
}
if (source["PROXY_ENABLED"]) {
const result = JSON.parse(source["PROXY_ENABLED"])
if (result) source["CURRENT_INTERCEPTOR_ID"] = "proxy"
delete source["PROXY_ENABLED"]
}
const final = defaultsDeep(source, getDefaultSettings())
return final
}

181
packages/hoppscotch-common/src/pages/settings.vue
View File

@@ -113,108 +113,11 @@
</p>
</div>
<div class="p-8 space-y-8 md:col-span-2">
<section>
<section v-for="[id, settings] in interceptorsWithSettings" :key="id">
<h4 class="font-semibold text-secondaryDark">
{{ t("settings.extensions") }}
{{ settings.entryTitle(t) }}
</h4>
<div class="my-1 text-secondaryLight">
<span v-if="extensionVersion != null">
{{
`${t("settings.extension_version")}: v${
extensionVersion.major
}.${extensionVersion.minor}`
}}
</span>
<span v-else>
{{ t("settings.extension_version") }}:
{{ t("settings.extension_ver_not_reported") }}
</span>
</div>
<div class="flex flex-col py-4 space-y-2">
<span>
<HoppSmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
label="Chrome"
:info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasChromeExtInstalled"
outline
/>
</span>
<span>
<HoppSmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"
label="Firefox"
:info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasFirefoxExtInstalled"
outline
/>
</span>
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<HoppSmartToggle
:on="EXTENSIONS_ENABLED"
@change="toggleInterceptor('extension')"
>
{{ t("settings.extensions_use_toggle") }}
</HoppSmartToggle>
</div>
</div>
</section>
<section>
<h4 class="font-semibold text-secondaryDark">
{{ t("settings.proxy") }}
</h4>
<div class="my-1 text-secondaryLight">
{{
`${t("settings.official_proxy_hosting")} ${t(
"settings.read_the"
)}`
}}
<HoppSmartAnchor
class="link"
to="https://docs.hoppscotch.io/support/privacy"
blank
:label="t('app.proxy_privacy_policy')"
/>.
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<HoppSmartToggle
:on="PROXY_ENABLED"
@change="toggleInterceptor('proxy')"
>
{{ t("settings.proxy_use_toggle") }}
</HoppSmartToggle>
</div>
</div>
<div class="flex items-center py-4 space-x-2">
<HoppSmartInput
v-model="PROXY_URL"
styles="flex-1"
placeholder=" "
input-styles="input floating-input"
:disabled="!PROXY_ENABLED"
>
<template #label>
<label for="url">
{{ t("settings.proxy_url") }}
</label>
</template>
</HoppSmartInput>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.reset_default')"
:icon="clearIcon"
outline
class="rounded"
@click="resetProxy"
/>
</div>
<component :is="settings.component" />
</section>
</div>
</div>
@@ -236,62 +139,47 @@
</template>
<script setup lang="ts">
import IconChrome from "~icons/brands/chrome"
import IconCheckCircle from "~icons/lucide/check-circle"
import IconFirefox from "~icons/brands/firefox"
import IconRotateCCW from "~icons/lucide/rotate-ccw"
import IconCheck from "~icons/lucide/check"
import { ref, computed, watch } from "vue"
import { refAutoReset } from "@vueuse/core"
import { applySetting, toggleSetting } from "~/newstore/settings"
import { useSetting } from "@composables/settings"
import { useToast } from "@composables/toast"
import { useI18n } from "@composables/i18n"
import { useColorMode } from "@composables/theming"
import { useReadonlyStream } from "@composables/stream"
import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
import { extensionStatus$ } from "~/newstore/HoppExtension"
import { usePageHead } from "@composables/head"
import { useService } from "dioc/vue"
import { InterceptorService } from "~/services/interceptor.service"
import { pipe } from "fp-ts/function"
import * as O from "fp-ts/Option"
import * as A from "fp-ts/Array"
const t = useI18n()
const toast = useToast()
const colorMode = useColorMode()
usePageHead({
title: computed(() => t("navigation.settings")),
})
const interceptorService = useService(InterceptorService)
const interceptorsWithSettings = computed(() =>
pipe(
interceptorService.availableInterceptors.value,
A.filterMap((interceptor) =>
interceptor.settingsPageEntry
? O.some([
interceptor.interceptorID,
interceptor.settingsPageEntry,
] as const)
: O.none
)
)
)
const ACCENT_COLOR = useSetting("THEME_COLOR")
const PROXY_ENABLED = useSetting("PROXY_ENABLED")
const PROXY_URL = useSetting("PROXY_URL")
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
const ZEN_MODE = useSetting("ZEN_MODE")
const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
const extensionVersion = computed(() => {
return currentExtensionStatus.value === "available"
? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
: null
})
const hasChromeExtInstalled = computed(
() => browserIsChrome() && currentExtensionStatus.value === "available"
)
const hasFirefoxExtInstalled = computed(
() => browserIsFirefox() && currentExtensionStatus.value === "available"
)
const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
IconRotateCCW,
1000
)
const confirmRemove = ref(false)
const proxySettings = computed(() => ({
@@ -310,34 +198,11 @@ watch(
{ deep: true }
)
// Extensions and proxy should not be enabled at the same time
const toggleInterceptor = (interceptor: "extension" | "proxy") => {
if (interceptor === "extension") {
EXTENSIONS_ENABLED.value = !EXTENSIONS_ENABLED.value
if (EXTENSIONS_ENABLED.value) {
PROXY_ENABLED.value = false
}
} else {
PROXY_ENABLED.value = !PROXY_ENABLED.value
if (PROXY_ENABLED.value) {
EXTENSIONS_ENABLED.value = false
}
}
}
const showConfirmModal = () => {
if (TELEMETRY_ENABLED.value) confirmRemove.value = true
else toggleSetting("TELEMETRY_ENABLED")
}
const resetProxy = () => {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
clearIcon.value = IconCheck
toast.success(`${t("state.cleared")}`)
}
const getColorModeName = (colorMode: string) => {
switch (colorMode) {
case "system":

2
packages/hoppscotch-common/src/platform/analytics.ts
View File

@@ -1,7 +1,7 @@
export type HoppRequestEvent =
| {
platform: "rest" | "graphql-query" | "graphql-schema"
strategy: "normal" | "proxy" | "extension"
strategy: string
}
| { platform: "wss" | "sse" | "socketio" | "mqtt" }

2
packages/hoppscotch-common/src/platform/index.ts
View File

@@ -6,6 +6,7 @@ import { SettingsPlatformDef } from "./settings"
import { HistoryPlatformDef } from "./history"
import { TabStatePlatformDef } from "./tab"
import { AnalyticsPlatformDef } from "./analytics"
import { InterceptorsPlatformDef } from "./interceptors"
export type PlatformDef = {
ui?: UIPlatformDef
@@ -18,6 +19,7 @@ export type PlatformDef = {
history: HistoryPlatformDef
tabState: TabStatePlatformDef
}
interceptors: InterceptorsPlatformDef
platformFeatureFlags: {
exportAsGIST: boolean
}

16
packages/hoppscotch-common/src/platform/interceptors.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Service } from "dioc"
import { Interceptor } from "~/services/interceptor.service"
export type PlatformInterceptorDef =
| { type: "standalone"; interceptor: Interceptor }
| {
type: "service"
service: typeof Service<unknown> & { ID: string } & {
new (): Service & Interceptor
}
}
export type InterceptorsPlatformDef = {
default: string
interceptors: PlatformInterceptorDef[]
}

106
packages/hoppscotch-common/src/platform/std/interceptors/browser.ts Normal file
View File

@@ -0,0 +1,106 @@
import * as E from "fp-ts/Either"
import {
Interceptor,
InterceptorError,
RequestRunResult,
} from "../../../services/interceptor.service"
import axios, { AxiosRequestConfig, CancelToken } from "axios"
import { cloneDeep } from "lodash-es"
export const preProcessRequest = (
req: AxiosRequestConfig
): AxiosRequestConfig => {
const reqClone = cloneDeep(req)
// If the parameters are URLSearchParams, inject them to URL instead
// This prevents issues of marshalling the URLSearchParams to the proxy
if (reqClone.params instanceof URLSearchParams) {
try {
const url = new URL(reqClone.url ?? "")
for (const [key, value] of reqClone.params.entries()) {
url.searchParams.append(key, value)
}
reqClone.url = url.toString()
} catch (e) {
// making this a non-empty block, so we can make the linter happy.
// we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
}
reqClone.params = {}
}
return reqClone
}
async function runRequest(
req: AxiosRequestConfig,
cancelToken: CancelToken
): RequestRunResult["response"] {
const timeStart = Date.now()
const processedReq = preProcessRequest(req)
try {
const res = await axios({
...processedReq,
cancelToken,
responseType: "arraybuffer",
})
const timeEnd = Date.now()
return E.right({
...res,
config: {
timeData: {
startTime: timeStart,
endTime: timeEnd,
},
},
})
} catch (e) {
const timeEnd = Date.now()
if (axios.isAxiosError(e) && e.response) {
return E.right({
...e.response,
config: {
timeData: {
startTime: timeStart,
endTime: timeEnd,
},
},
})
} else if (axios.isCancel(e)) {
return E.left("cancellation")
} else {
return E.left(<InterceptorError>{
humanMessage: {
heading: (t) => t("error.network_fail"),
description: (t) => t("helpers.network_fail"),
},
error: e,
})
}
}
}
export const browserInterceptor: Interceptor = {
interceptorID: "browser",
name: (t) => t("state.none"),
selectable: { type: "selectable" },
runRequest(req) {
const cancelToken = axios.CancelToken.source()
const processedReq = preProcessRequest(req)
const promise = runRequest(processedReq, cancelToken.token)
return {
cancel: () => cancelToken.cancel(),
response: promise,
}
},
}

252
packages/hoppscotch-common/src/platform/std/interceptors/extension.ts Normal file
View File

@@ -0,0 +1,252 @@
import * as E from "fp-ts/Either"
import { AxiosRequestConfig } from "axios"
import { Service } from "dioc"
import { getI18n } from "~/modules/i18n"
import {
Interceptor,
InterceptorError,
RequestRunResult,
} from "~/services/interceptor.service"
import { cloneDeep } from "lodash-es"
import { computed, readonly, ref } from "vue"
import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
import SettingsExtension from "~/components/settings/Extension.vue"
import InterceptorsExtensionSubtitle from "~/components/interceptors/ExtensionSubtitle.vue"
export const defineSubscribableObject = <T extends object>(obj: T) => {
const proxyObject = {
...obj,
_subscribers: {} as {
// eslint-disable-next-line no-unused-vars
[key in keyof T]?: ((...args: any[]) => any)[]
},
subscribe(prop: keyof T, func: (...args: any[]) => any): void {
if (Array.isArray(this._subscribers[prop])) {
this._subscribers[prop]?.push(func)
} else {
this._subscribers[prop] = [func]
}
},
}
type SubscribableProxyObject = typeof proxyObject
return new Proxy(proxyObject, {
set(obj, prop, newVal) {
obj[prop as keyof SubscribableProxyObject] = newVal
const currentSubscribers = obj._subscribers[prop as keyof T]
if (Array.isArray(currentSubscribers)) {
for (const subscriber of currentSubscribers) {
subscriber(newVal)
}
}
return true
},
})
}
// TODO: Rework this to deal with individual requests rather than cancel all
export const cancelRunningExtensionRequest = () => {
window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRequest()
}
const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
const reqClone = cloneDeep(req)
// If the parameters are URLSearchParams, inject them to URL instead
// This prevents marshalling issues with structured cloning of URLSearchParams
if (reqClone.params instanceof URLSearchParams) {
try {
const url = new URL(reqClone.url ?? "")
for (const [key, value] of reqClone.params.entries()) {
url.searchParams.append(key, value)
}
reqClone.url = url.toString()
} catch (e) {
// making this a non-empty block, so we can make the linter happy.
// we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
}
reqClone.params = {}
}
return reqClone
}
export type ExtensionStatus = "available" | "unknown-origin" | "waiting"
/**
* This service is responsible for defining the extension interceptor.
*/
export class ExtensionInterceptorService
extends Service
implements Interceptor
{
public static readonly ID = "EXTENSION_INTERCEPTOR_SERVICE"
private _extensionStatus = ref<ExtensionStatus>("waiting")
/**
* The status of the extension, whether it's available, or not.
*/
public extensionStatus = readonly(this._extensionStatus)
/**
* The version of the extension, if available.
*/
public extensionVersion = computed(() => {
if (this.extensionStatus.value === "available") {
return window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion()
} else {
return null
}
})
/**
* Whether the extension is installed in Chrome or not.
*/
public chromeExtensionInstalled = computed(
() => this.extensionStatus.value === "available" && browserIsChrome()
)
/**
* Whether the extension is installed in Firefox or not.
*/
public firefoxExtensionInstalled = computed(
() => this.extensionStatus.value === "available" && browserIsFirefox()
)
public interceptorID = "extension"
public settingsPageEntry: Interceptor["settingsPageEntry"] = {
entryTitle: (t) => t("settings.extensions"),
component: SettingsExtension,
}
public selectorSubtitle = InterceptorsExtensionSubtitle
public selectable = { type: "selectable" as const }
constructor() {
super()
this.listenForExtensionStatus()
}
private listenForExtensionStatus() {
const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
if (window.__HOPP_EXTENSION_STATUS_PROXY__) {
this._extensionStatus.value =
window.__HOPP_EXTENSION_STATUS_PROXY__.status
window.__HOPP_EXTENSION_STATUS_PROXY__.subscribe(
"status",
(status: ExtensionStatus) => {
this._extensionStatus.value = status
}
)
} else {
const statusProxy = defineSubscribableObject({
status: "waiting" as ExtensionStatus,
})
window.__HOPP_EXTENSION_STATUS_PROXY__ = statusProxy
statusProxy.subscribe(
"status",
(status: ExtensionStatus) => (this._extensionStatus.value = status)
)
/**
* Keeping identifying extension backward compatible
* We are assuming the default version is 0.24 or later. So if the extension exists, its identified immediately,
* then we use a poll to find the version, this will get the version for 0.24 and any other version
* of the extension, but will have a slight lag.
* 0.24 users will get the benefits of 0.24, while the extension won't break for the old users
*/
extensionPollIntervalId.value = setInterval(() => {
if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
if (extensionPollIntervalId.value)
clearInterval(extensionPollIntervalId.value)
const version = window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
// When the version is not 0.24 or higher, the extension wont do this. so we have to do it manually
if (
version.major === 0 &&
version.minor <= 23 &&
window.__HOPP_EXTENSION_STATUS_PROXY__
) {
window.__HOPP_EXTENSION_STATUS_PROXY__.status = "available"
}
}
}, 2000)
}
}
public name(t: ReturnType<typeof getI18n>) {
return computed(() => {
const version = window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion()
if (this.extensionStatus.value === "available" && version) {
const { major, minor } = version
return `${t("settings.extensions")}: v${major}.${minor}`
} else {
return `${t("settings.extensions")}: ${t(
"settings.extension_ver_not_reported"
)}`
}
})
}
private async runRequestOnExtension(
req: AxiosRequestConfig
): RequestRunResult["response"] {
const extensionHook = window.__POSTWOMAN_EXTENSION_HOOK__
if (!extensionHook) {
return E.left(<InterceptorError>{
// TODO: i18n this
humanMessage: {
heading: () => "Extension not found",
description: () => "Heading not found",
},
error: "NO_PW_EXT_HOOK",
})
}
try {
const result = await extensionHook.sendRequest({
...req,
wantsBinary: true,
})
return E.right(result)
} catch (e) {
return E.left(<InterceptorError>{
// TODO: i18n this
humanMessage: {
heading: () => "Extension error",
description: () => "Failed running request on extension",
},
error: e,
})
}
}
public runRequest(
request: AxiosRequestConfig
): RequestRunResult<InterceptorError> {
const processedReq = preProcessRequest(request)
return {
cancel: cancelRunningExtensionRequest,
response: this.runRequestOnExtension(processedReq),
}
}
}

115
packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts Normal file
View File

@@ -0,0 +1,115 @@
import { Interceptor, RequestRunResult } from "~/services/interceptor.service"
import { AxiosRequestConfig, CancelToken } from "axios"
import * as E from "fp-ts/Either"
import { preProcessRequest } from "./browser"
import { v4 } from "uuid"
import axios from "axios"
import { settingsStore } from "~/newstore/settings"
import { decodeB64StringToArrayBuffer } from "~/helpers/utils/b64"
import SettingsProxy from "~/components/settings/Proxy.vue"
type ProxyHeaders = {
"multipart-part-key"?: string
}
type ProxyPayloadType =
| FormData
| (AxiosRequestConfig & { wantsBinary: true; accessToken: string })
const getProxyPayload = (
req: AxiosRequestConfig,
multipartKey: string | null
) => {
let payload: ProxyPayloadType = {
...req,
wantsBinary: true,
accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
}
if (payload.data instanceof FormData) {
const formData = payload.data
payload.data = ""
formData.append(multipartKey!, JSON.stringify(payload))
payload = formData
}
return payload
}
async function runRequest(
req: AxiosRequestConfig,
cancelToken: CancelToken
): RequestRunResult["response"] {
const multipartKey =
req.data instanceof FormData ? `proxyRequestData-${v4()}` : null
const headers =
req.data instanceof FormData
? <ProxyHeaders>{
"multipart-part-key": multipartKey,
}
: <ProxyHeaders>{}
const payload = getProxyPayload(req, multipartKey)
try {
// TODO: Validation for the proxy result
const { data } = await axios.post(
settingsStore.value.PROXY_URL ?? "https://proxy.hoppscotch.io",
payload,
{
headers,
cancelToken,
}
)
if (!data.success) {
return E.left({
humanMessage: {
heading: (t) => t("error.network_fail"),
description: (t) => data.data?.message ?? t("error.proxy_error"),
},
})
}
if (data.isBinary) {
data.data = decodeB64StringToArrayBuffer(data.data)
}
return E.right(data)
} catch (e) {
if (axios.isCancel(e)) {
return E.left("cancellation")
} else {
return E.left({
humanMessage: {
heading: (t) => t("error.network_fail"),
description: (t) => t("helpers.network_fail"),
},
error: e,
})
}
}
}
export const proxyInterceptor: Interceptor = {
interceptorID: "proxy",
name: (t) => t("settings.proxy"),
selectable: { type: "selectable" },
settingsPageEntry: {
entryTitle: (t) => t("settings.proxy"),
component: SettingsProxy,
},
runRequest(req) {
const cancelToken = axios.CancelToken.source()
const processedReq = preProcessRequest(req)
const promise = runRequest(processedReq, cancelToken.token)
return {
cancel: () => cancelToken.cancel(),
response: promise,
}
},
}

143
packages/hoppscotch-common/src/services/__tests__/interceptor.service.spec.ts Normal file
View File

@@ -0,0 +1,143 @@
import { describe, expect, it, vi } from "vitest"
import { Interceptor, InterceptorService } from "../interceptor.service"
import { TestContainer } from "dioc/testing"
describe("InterceptorService", () => {
it("initally there are no interceptors defined", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
expect(service.availableInterceptors.value).toEqual([])
})
it("currentInterceptorID should be null if no interceptors are defined", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
expect(service.currentInterceptorID.value).toBeNull()
})
it("currentInterceptorID should be set if there is an interceptor defined", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
service.registerInterceptor({
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: () => {
throw new Error("Not implemented")
},
})
expect(service.currentInterceptorID.value).toEqual("test")
})
it("currentInterceptorID cannot be set to null if there are interceptors defined", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
service.registerInterceptor({
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: () => {
throw new Error("Not implemented")
},
})
service.currentInterceptorID.value = null
expect(service.currentInterceptorID.value).not.toBeNull()
})
it("currentInterceptorID cannot be set to an unknown interceptor ID", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
service.registerInterceptor({
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: () => {
throw new Error("Not implemented")
},
})
service.currentInterceptorID.value = "unknown"
expect(service.currentInterceptorID.value).not.toEqual("unknown")
})
describe("registerInterceptor", () => {
it("should register the interceptor", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
const interceptor: Interceptor = {
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: () => {
throw new Error("Not implemented")
},
}
service.registerInterceptor(interceptor)
expect(service.availableInterceptors.value).toEqual([interceptor])
})
it("should set the current interceptor ID to non-null after the intiial registration", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
const interceptor: Interceptor = {
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: () => {
throw new Error("Not implemented")
},
}
service.registerInterceptor(interceptor)
expect(service.currentInterceptorID.value).not.toBeNull()
})
})
describe("runRequest", () => {
it("should throw an error if no interceptor is selected", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
expect(() => service.runRequest({})).toThrowError()
})
it("asks the current interceptor to run the request", () => {
const container = new TestContainer()
const service = container.bind(InterceptorService)
const interceptor: Interceptor = {
interceptorID: "test",
name: () => "Test Interceptor",
selectable: { type: "selectable" },
runRequest: vi.fn(),
}
service.registerInterceptor(interceptor)
service.runRequest({})
expect(interceptor.runRequest).toHaveBeenCalled()
})
})
})

218
packages/hoppscotch-common/src/services/interceptor.service.ts Normal file
View File

@@ -0,0 +1,218 @@
import * as E from "fp-ts/Either"
import { Service } from "dioc"
import { MaybeRef, refWithControl } from "@vueuse/core"
import { AxiosRequestConfig, AxiosResponse } from "axios"
import type { getI18n } from "~/modules/i18n"
import { throwError } from "~/helpers/functional/error"
import { Component, Ref, computed, reactive, watch, unref, markRaw } from "vue"
/**
* Defines the response data from an interceptor request run.
*/
export type NetworkResponse = AxiosResponse<unknown> & {
config?: {
timeData?: {
startTime: number
endTime: number
}
}
}
/**
* Defines the errors that can occur during interceptor request run.
*/
export type InterceptorError =
| "cancellation"
| {
humanMessage: {
heading: (t: ReturnType<typeof getI18n>) => string
description: (t: ReturnType<typeof getI18n>) => string
}
error?: unknown
}
/**
* Defines the result of an interceptor request run.
*/
export type RequestRunResult<Err extends InterceptorError = InterceptorError> =
{
/**
* Cancels the interceptor request run.
*/
cancel: () => void
/**
* Promise that resolves when the interceptor request run is finished.
*/
response: Promise<E.Either<Err, NetworkResponse>>
}
/**
* Defines whether an interceptor is selectable or not
*/
export type InterceptorSelectableStatus<CustomComponentProps = any> =
| { type: "selectable" }
| {
type: "unselectable"
reason:
| {
type: "text"
text: (t: ReturnType<typeof getI18n>) => string
action?: {
text: (t: ReturnType<typeof getI18n>) => string
onActionClick: () => void
}
}
| {
type: "custom"
component: Component<CustomComponentProps>
props: CustomComponentProps
}
}
/**
* An interceptor is an object that defines how to run a Hoppscotch request.
*/
export type Interceptor<Err extends InterceptorError = InterceptorError> = {
/**
* The ID of the interceptor. This should be unique across all registered interceptors.
*/
interceptorID: string
/**
* The function that returns the name of the interceptor.
* @param t The i18n function.
*/
name: (t: ReturnType<typeof getI18n>) => MaybeRef<string>
/**
* Defines what to render in the Interceptor section of the Settings page.
* Use this space to define interceptor specific settings.
* Not setting this will lead to nothing being rendered about this interceptor in the settings page.
*/
settingsPageEntry?: {
/**
* The title of the interceptor entry in the settings page.
*/
entryTitle: (t: ReturnType<typeof getI18n>) => string
/**
* The component to render in the settings page.
*/
component: Component
}
/**
* Defines what to render under the entry for the interceptor in the Interceptor selector.
*/
selectorSubtitle?: Component
/**
* Defines whether the interceptor is selectable or not.
*/
selectable: MaybeRef<InterceptorSelectableStatus<unknown>>
/**
* Runs the interceptor on the given request.
* NOTE: Make sure this function doesn't throw, instead when an error occurs, return a Left Either with the error.
* @param request The request to run the interceptor on.
*/
runRequest: (request: AxiosRequestConfig) => RequestRunResult<Err>
}
/**
* This service deals with the registration and execution of
* interceptors for request execution.
*/
export class InterceptorService extends Service {
public static readonly ID = "INTERCEPTOR_SERVICE"
private interceptors: Map<string, Interceptor> = reactive(new Map())
/**
* The ID of the currently selected interceptor.
* If `null`, there are no interceptors registered or none can be selected.
*/
public currentInterceptorID: Ref<string | null> = refWithControl(
null as string | null,
{
onBeforeChange: (value) => {
if (!value) {
// Only allow `null` if there are no interceptors
return this.availableInterceptors.value.length === 0
}
if (value && !this.interceptors.has(value)) {
console.warn(
"Attempt to set current interceptor ID to unknown ID is ignored"
)
return false
}
return true
},
}
)
/**
* List of interceptors that are registered with the service.
*/
public availableInterceptors = computed(() =>
Array.from(this.interceptors.values())
)
constructor() {
super()
// If the current interceptor is unselectable, select the first selectable one, else null
watch([() => this.interceptors, this.currentInterceptorID], () => {
if (!this.currentInterceptorID.value) return
const interceptor = this.interceptors.get(this.currentInterceptorID.value)
if (!interceptor) {
this.currentInterceptorID.value = null
return
}
if (unref(interceptor.selectable).type === "unselectable") {
this.currentInterceptorID.value =
this.availableInterceptors.value.filter(
(interceptor) => unref(interceptor.selectable).type === "selectable"
)[0]?.interceptorID ?? null
}
})
}
/**
* Register an interceptor with the service.
* @param interceptor The interceptor to register
*/
public registerInterceptor(interceptor: Interceptor) {
// markRaw so that interceptor state by itself is not fully marked reactive
this.interceptors.set(interceptor.interceptorID, markRaw(interceptor))
if (this.currentInterceptorID.value === null) {
this.currentInterceptorID.value = interceptor.interceptorID
}
}
/**
* Runs a request through the currently selected interceptor.
* @param req The request to run
* @throws If no interceptor is selected
*/
public runRequest(req: AxiosRequestConfig): RequestRunResult {
if (!this.currentInterceptorID.value) {
throw new Error("No interceptor selected")
}
const interceptor =
this.interceptors.get(this.currentInterceptorID.value) ??
throwError(
"Current Interceptor ID is not found in the list of registered interceptors"
)
return interceptor.runRequest(req)
}
}

11
packages/hoppscotch-selfhost-web/src/main.ts
View File

@@ -5,6 +5,9 @@ import { def as collectionsDef } from "./platform/collections/collections.platfo
import { def as settingsDef } from "./platform/settings/settings.platform"
import { def as historyDef } from "./platform/history/history.platform"
import { def as tabStateDef } from "./platform/tabState/tabState.platform"
import { browserInterceptor } from "@hoppscotch/common/platform/std/interceptors/browser"
import { proxyInterceptor } from "@hoppscotch/common/platform/std/interceptors/proxy"
import { ExtensionInterceptorService } from "@hoppscotch/common/platform/std/interceptors/extension"
createHoppApp("#app", {
auth: authDef,
@@ -15,6 +18,14 @@ createHoppApp("#app", {
history: historyDef,
tabState: tabStateDef,
},
interceptors: {
default: "browser",
interceptors: [
{ type: "standalone", interceptor: browserInterceptor },
{ type: "standalone", interceptor: proxyInterceptor },
{ type: "service", service: ExtensionInterceptorService },
],
},
platformFeatureFlags: {
exportAsGIST: false,
},

4
packages/hoppscotch-selfhost-web/src/platform/settings/settings.platform.ts
View File

@@ -10,7 +10,7 @@ import * as E from "fp-ts/Either"
import { runGQLSubscription } from "@hoppscotch/common/helpers/backend/GQLClient"
import {
bulkApplySettings,
defaultSettings,
getDefaultSettings,
} from "@hoppscotch/common/newstore/settings"
import { runDispatchWithOutSyncing } from "@lib/sync"
@@ -47,7 +47,7 @@ async function loadUserSettings() {
// create user settings if it doesn't exist
E.isLeft(res) &&
res.left.error == "user_settings/not_found" &&
(await createUserSettings(JSON.stringify(defaultSettings)))
(await createUserSettings(JSON.stringify(getDefaultSettings())))
if (E.isRight(res)) {
runDispatchWithOutSyncing(() => {