feat: override content-type (#2191)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/http/Body.vue

@@ -49,6 +49,25 @@
             />
           </div>
         </tippy>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="$t('request.override_help')"
+          :label="
+            overridenContentType
+              ? `${$t('request.overriden')}: ${overridenContentType}`
+              : $t('request.override')
+          "
+          :svg="overridenContentType ? 'info' : 'refresh-cw'"
+          :class="[
+            '!px-1 !py-0.5',
+            {
+              'text-yellow-500 hover:text-yellow-500': overridenContentType,
+            },
+          ]"
+          filled
+          outline
+          @click.native="contentTypeOverride('headers')"
+        />
       </span>
     </div>
     <HttpBodyParameters v-if="contentType === 'multipart/form-data'" />
@@ -80,19 +99,56 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
+import { RequestOptionTabs } from "./RequestOptions.vue"
 import { useStream } from "~/helpers/utils/composables"
-import { restContentType$, setRESTContentType } from "~/newstore/RESTSession"
 import { knownContentTypes } from "~/helpers/utils/contenttypes"
+import {
+  restContentType$,
+  restHeaders$,
+  setRESTContentType,
+  setRESTHeaders,
+  addRESTHeader,
+} from "~/newstore/RESTSession"
 
-export default defineComponent({
-  setup() {
-    return {
-      validContentTypes: Object.keys(knownContentTypes),
+const emit = defineEmits<{
+  (e: "change-tab", value: string): void
+}>()
 
-      contentType: useStream(restContentType$, null, setRESTContentType),
-    }
-  },
-})
+const validContentTypes = Object.keys(knownContentTypes)
+const contentType = useStream(restContentType$, null, setRESTContentType)
+
+// The functional headers list (the headers actually in the system)
+const headers = useStream(restHeaders$, [], setRESTHeaders)
+
+const overridenContentType = computed(() =>
+  pipe(
+    headers.value,
+    A.findLast((h) => h.key.toLowerCase() === "content-type" && h.active),
+    O.map((h) => h.value),
+    O.getOrElse(() => "")
+  )
+)
+
+const contentTypeOverride = (tab: RequestOptionTabs) => {
+  emit("change-tab", tab)
+  if (!isContentTypeAlreadyExist()) {
+    addRESTHeader({
+      key: "Content-Type",
+      value: "",
+      active: true,
+    })
+  }
+}
+
+const isContentTypeAlreadyExist = () => {
+  return pipe(
+    headers.value,
+    A.some((e) => e.key.toLowerCase() === "content-type")
+  )
+}
 </script>

packages/hoppscotch-app/components/http/RequestOptions.vue

@@ -11,7 +11,7 @@
       <HttpParameters />
     </SmartTab>
     <SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
-      <HttpBody />
+      <HttpBody @change-tab="changeTab" />
     </SmartTab>
     <SmartTab
       :id="'headers'"
@@ -53,10 +53,18 @@ import {
   useTestScript,
 } from "~/newstore/RESTSession"
 
-type RequestOptionTabs = "params" | "bodyParams" | "headers" | "authorization"
+export type RequestOptionTabs =
+  | "params"
+  | "bodyParams"
+  | "headers"
+  | "authorization"
 
 const selectedRealtimeTab = ref<RequestOptionTabs>("params")
 
+const changeTab = (e: RequestOptionTabs) => {
+  selectedRealtimeTab.value = e
+}
+
 const newActiveParamsCount$ = useReadonlyStream(
   restActiveParamsCount$.pipe(
     map((e) => {

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -44,12 +44,14 @@ const props = withDefaults(
     placeholder: string
     styles: string
     envs: { key: string; value: string; source: string }[] | null
+    focus: boolean
   }>(),
   {
     value: "",
     placeholder: "",
     styles: "",
     envs: null,
+    focus: false,
   }
 )
 

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -65,7 +65,12 @@
 </template>
 
 <script setup lang="ts">
+import { pipe } from "fp-ts/function"
+import { not } from "fp-ts/Predicate"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
 import { ref, ComputedRef, computed, provide } from "@nuxtjs/composition-api"
+import { throwError } from "~/helpers/functional/error"
 
 export type TabMeta = {
   label: string | null
@@ -103,32 +108,35 @@ const emit = defineEmits<{
 const tabEntries = ref<Array<[string, TabMeta]>>([])
 
 const addTabEntry = (tabID: string, meta: TabMeta) => {
-  if (tabEntries.value.find(([id]) => id === tabID)) {
-    throw new Error(`Tab with duplicate ID created: '${tabID}'`)
-  }
-  tabEntries.value.push([tabID, meta])
+  tabEntries.value = pipe(
+    tabEntries.value,
+    O.fromPredicate(not(A.exists(([id]) => id === tabID))),
+    O.map(A.append([tabID, meta] as [string, TabMeta])),
+    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`))
+  )
 }
 
 const updateTabEntry = (tabID: string, newMeta: TabMeta) => {
-  const index = tabEntries.value.findIndex(([id]) => id === tabID)
-
-  if (index === -1) {
-    console.warn(`Tried to update non-existent tab entry: ${tabID}`)
-    return
-  }
-
-  tabEntries.value[index] = [tabID, newMeta]
+  tabEntries.value = pipe(
+    tabEntries.value,
+    A.findIndex(([id]) => id === tabID),
+    O.chain((index) =>
+      pipe(
+        tabEntries.value,
+        A.updateAt(index, [tabID, newMeta] as [string, TabMeta])
+      )
+    ),
+    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`))
+  )
 }
 
 const removeTabEntry = (tabID: string) => {
-  const index = tabEntries.value.findIndex(([id]) => id === tabID)
-
-  if (index === -1) {
-    console.warn(`Tried to remove non-existent tab entry: ${tabID}`)
-    return
-  }
-
-  tabEntries.value.splice(index, 1)
+  tabEntries.value = pipe(
+    tabEntries.value,
+    A.findIndex(([id]) => id === tabID),
+    O.chain((index) => pipe(tabEntries.value, A.deleteAt(index))),
+    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`))
+  )
 
   // If we tried to remove the active tabEntries, switch to first tab entry
   if (props.value === tabID)

packages/hoppscotch-app/helpers/utils/EffectiveURL.ts

@@ -203,7 +203,10 @@ export function getEffectiveRESTRequest(
   }
 
   const effectiveFinalBody = getFinalBodyFromRequest(request, envVariables)
-  if (request.body.contentType)
+  const contentTypeInHeader = effectiveFinalHeaders.find(
+    (x) => x.key.toLowerCase() === "content-type"
+  )
+  if (request.body.contentType && !contentTypeInHeader?.value)
     effectiveFinalHeaders.push({
       active: true,
       key: "content-type",

packages/hoppscotch-app/locales/en.json

@@ -345,7 +345,10 @@
     "title": "Request",
     "type": "Request type",
     "url": "URL",
-    "variables": "Variables"
+    "variables": "Variables",
+    "override": "Override",
+    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "overriden": "Overridden"
   },
   "response": {
     "body": "Response Body",