chore: split app to commons and web (squash commit)

packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts

@@ -0,0 +1,163 @@
+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

packages/hoppscotch-common/src/helpers/strategies/ExtensionStrategy.ts

@@ -0,0 +1,128 @@
+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__?.cancelRunningRequest()
+}
+
+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

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

@@ -0,0 +1,75 @@
+import axios from "axios"
+import axiosStrategy from "../AxiosStrategy"
+
+jest.mock("axios")
+jest.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==",
+      })
+    })
+  })
+})

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

@@ -0,0 +1,144 @@
+import axios from "axios"
+import axiosStrategy from "../AxiosStrategy"
+
+jest.mock("../../utils/b64", () => ({
+  __esModule: true,
+  decodeB64StringToArrayBuffer: jest.fn((data) => `${data}-converted`),
+}))
+jest.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
+
+      jest.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
+
+      jest.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
+
+      jest.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 () => {
+      jest.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 () => {
+      jest.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 () => {
+      jest.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 () => {
+      jest.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 () => {
+      jest.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 () => {
+      jest.spyOn(axios, "post").mockRejectedValue("errr")
+      jest.spyOn(axios, "isCancel").mockReturnValueOnce(true)
+
+      expect(await axiosStrategy({})()).toEqualLeft("cancellation")
+    })
+
+    test("non-cancellation errors return a left", async () => {
+      jest.spyOn(axios, "post").mockRejectedValue("errr")
+      jest.spyOn(axios, "isCancel").mockReturnValueOnce(false)
+
+      expect(await axiosStrategy({})()).toEqualLeft("errr")
+    })
+  })
+})

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

@@ -0,0 +1,211 @@
+import extensionStrategy, {
+  hasExtensionInstalled,
+  hasChromeExtensionInstalled,
+  hasFirefoxExtensionInstalled,
+  cancelRunningExtensionRequest,
+} from "../ExtensionStrategy"
+
+jest.mock("../../utils/b64", () => ({
+  __esModule: true,
+  decodeB64StringToArrayBuffer: jest.fn((data) => `${data}-converted`),
+}))
+
+jest.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__ = {}
+    jest.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
+    jest.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__ = {}
+    jest.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
+    jest.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
+    jest.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
+    jest.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
+    jest.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
+    jest.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__ = {}
+    jest.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__ = {}
+    jest.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
+    jest.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
+    jest.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
+
+    expect(hasFirefoxExtensionInstalled()).toEqual(false)
+  })
+})
+
+describe("cancelRunningExtensionRequest", () => {
+  const cancelFunc = jest.fn()
+
+  beforeEach(() => {
+    cancelFunc.mockClear()
+  })
+
+  test("cancels request if extension installed and function present in hook", () => {
+    global.__POSTWOMAN_EXTENSION_HOOK__ = {
+      cancelRunningRequest: 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 = jest.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")
+    })
+  })
+})