feat: segmented content-type dropdown UI (#2382)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>

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

@@ -22,7 +22,10 @@
               />
             </span>
           </template>
-          <div class="flex flex-col" role="menu">
+          <div
+            class="flex flex-col space-y-1 divide-y divide-dividerLight"
+            role="menu"
+          >
             <SmartItem
               :label="$t('state.none').toLowerCase()"
               :info-icon="contentType === null ? 'done' : ''"
@@ -34,19 +37,36 @@
                 }
               "
             />
-            <SmartItem
+            <div
-              v-for="(contentTypeItem, index) in validContentTypes"
+              v-for="(
-              :key="`contentTypeItem-${index}`"
+                contentTypeItems, contentTypeItemsIndex
-              :label="contentTypeItem"
+              ) in segmentedContentTypes"
-              :info-icon="contentTypeItem === contentType ? 'done' : ''"
+              :key="`contentTypeItems-${contentTypeItemsIndex}`"
-              :active-info-icon="contentTypeItem === contentType"
+              class="flex flex-col py-2 text-left"
-              @click.native="
+            >
-                () => {
+              <div class="flex rounded py-2 px-4">
-                  contentType = contentTypeItem
+                <span class="text-tiny text-secondaryLight font-bold">
-                  $refs.contentTypeOptions.tippy().hide()
+                  {{ $t(contentTypeItems.title) }}
-                }
+                </span>
-              "
+              </div>
-            />
+              <div class="flex flex-col">
+                <SmartItem
+                  v-for="(
+                    contentTypeItem, contentTypeIndex
+                  ) in contentTypeItems.contentTypes"
+                  :key="`contentTypeItem-${contentTypeIndex}`"
+                  :label="contentTypeItem"
+                  :info-icon="contentTypeItem === contentType ? 'done' : ''"
+                  :active-info-icon="contentTypeItem === contentType"
+                  @click.native="
+                    () => {
+                      contentType = contentTypeItem
+                      $refs.contentTypeOptions.tippy().hide()
+                    }
+                  "
+                />
+              </div>
+            </div>
           </div>
         </tippy>
         <ButtonSecondary
@@ -106,7 +126,7 @@ 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 { knownContentTypes } from "~/helpers/utils/contenttypes"
+import { segmentedContentTypes } from "~/helpers/utils/contenttypes"
 import {
   restContentType$,
   restHeaders$,
@@ -119,7 +139,6 @@ const emit = defineEmits<{
   (e: "change-tab", value: string): void
 }>()
 
-const validContentTypes = Object.keys(knownContentTypes)
 const contentType = useStream(restContentType$, null, setRESTContentType)
 
 // The functional headers list (the headers actually in the system)

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

@@ -14,6 +14,37 @@ export const knownContentTypes: Record<ValidContentTypes, Content> = {
   "text/plain": "plain",
 }
 
+type ContentTypeTitle =
+  | "request.content_type_titles.text"
+  | "request.content_type_titles.structured"
+  | "request.content_type_titles.others"
+
+type SegmentedContentType = {
+  title: ContentTypeTitle
+  contentTypes: ValidContentTypes[]
+}
+
+export const segmentedContentTypes: SegmentedContentType[] = [
+  {
+    title: "request.content_type_titles.text",
+    contentTypes: [
+      "application/json",
+      "application/ld+json",
+      "application/hal+json",
+      "application/vnd.api+json",
+      "application/xml",
+    ],
+  },
+  {
+    title: "request.content_type_titles.structured",
+    contentTypes: ["application/x-www-form-urlencoded", "multipart/form-data"],
+  },
+  {
+    title: "request.content_type_titles.others",
+    contentTypes: ["text/html", "text/plain"],
+  },
+]
+
 export function isJSONContentType(contentType: string) {
   return /\bjson\b/i.test(contentType)
 }

packages/hoppscotch-app/locales/en.json

@@ -340,6 +340,11 @@
     "body": "Request Body",
     "choose_language": "Choose language",
     "content_type": "Content Type",
+    "content_type_titles": {
+      "others": "Others",
+      "structured": "Structured",
+      "text": "Text"
+    },
     "copy_link": "Copy link",
     "duration": "Duration",
     "enter_curl": "Enter cURL",