feat: description field for request parameters and headers (#4187)

* feat: key-value component added for reuse

* chore: inspection result added

* chore: add `HoppRESTRequest` schema `v7`

* feat: add `description` for field for REST request headers

* feat: add `description` for field for GraphQL request headers

* fix: synchronization logic b/w bulk edit context and the default view

- Add `HoppGQLRequest` schema `v6`.
- Fix pre-existing issue with changes in bulk edit context not immediately reflecting in the default GQL request headers view.

* feat: support importing `description` fields from external sources

* test: fix failing tests

* chore: include description field for computed headers

Headers computed based on authorization info & inherited entries.

* feat: add `description` field for headers at the collection level

Add `HoppCollection` schema `v3`.

* test: fix failing tests

* ci: update tests workflow target branch trigger

* chore: cleanup

* chore: cleanup

* chore: rely on type inference

---------

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

.github/workflows/tests.yml

@@ -2,9 +2,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main, staging, "release/**"]
+    branches: [main, next, patch]
   pull_request:
-    branches: [main, staging, "release/**"]
+    branches: [main, next, patch]
 
 jobs:
   test:

packages/hoppscotch-cli/src/__tests__/unit/fixtures/workspace-access.mock.ts

@@ -15,7 +15,7 @@ export const WORKSPACE_DEEPLY_NESTED_COLLECTIONS_WITH_AUTH_HEADERS_MOCK: Workspa
   [
     {
       id: "clx1ldkzs005t10f8rp5u60q7",
-      data: '{"auth":{"token":"BearerToken","authType":"bearer","authActive":true},"headers":[{"key":"X-Test-Header","value":"Set at root collection","active":true}]}',
+      data: '{"auth":{"token":"BearerToken","authType":"bearer","authActive":true},"headers":[{"key":"X-Test-Header","value":"Set at root collection","active":true,"description":""}]}',
       title: "CollectionA",
       parentID: null,
       folders: [
@@ -245,6 +245,7 @@ export const TRANSFORMED_DEEPLY_NESTED_COLLECTIONS_WITH_AUTH_HEADERS_MOCK: HoppC
           key: "X-Test-Header",
           value: "Set at root collection",
           active: true,
+          description: "",
         },
       ],
     },
@@ -547,12 +548,12 @@ export const WORKSPACE_COLLECTIONS_WITHOUT_AUTH_HEADERS_AT_CERTAIN_LEVELS_MOCK:
 export const TRANSFORMED_COLLECTIONS_WITHOUT_AUTH_HEADERS_AT_CERTAIN_LEVELS_MOCK: HoppCollection[] =
   [
     {
-      v: 2,
+      v: CollectionSchemaVersion,
       id: "clx1kxvao005m10f8luqivrf1",
       name: "Collection with no authorization/headers set",
       folders: [
         {
-          v: 2,
+          v: CollectionSchemaVersion,
           id: "clx1kygjt005n10f8m1nkhjux",
           name: "folder-1",
           folders: [],
@@ -584,7 +585,7 @@ export const TRANSFORMED_COLLECTIONS_WITHOUT_AUTH_HEADERS_AT_CERTAIN_LEVELS_MOCK
           headers: [],
         },
         {
-          v: 2,
+          v: CollectionSchemaVersion,
           id: "clx1kym98005o10f8qg17t9o2",
           name: "folder-2",
           folders: [],
@@ -622,7 +623,7 @@ export const TRANSFORMED_COLLECTIONS_WITHOUT_AUTH_HEADERS_AT_CERTAIN_LEVELS_MOCK
           ],
         },
         {
-          v: 2,
+          v: CollectionSchemaVersion,
           id: "clx1l2bu6005r10f8daynohge",
           name: "folder-3",
           folders: [],
@@ -634,7 +635,7 @@ export const TRANSFORMED_COLLECTIONS_WITHOUT_AUTH_HEADERS_AT_CERTAIN_LEVELS_MOCK
           headers: [],
         },
         {
-          v: 2,
+          v: CollectionSchemaVersion,
           id: "clx1l2eaz005s10f8loetbbeb",
           name: "folder-4",
           folders: [],

packages/hoppscotch-cli/src/__tests__/unit/getters.spec.ts

@@ -61,6 +61,7 @@ describe("getters", () => {
               active: true,
               key: "<<UNKNOWN_KEY>>",
               value: "<<UNKNOWN_VALUE>>",
+              description: "",
             },
           ],
           environmentVariables
@@ -71,7 +72,7 @@ describe("getters", () => {
     test("Inactive list of meta-data", () => {
       expect(
         getEffectiveFinalMetaData(
-          [{ active: false, key: "KEY", value: "<<PARAM>>" }],
+          [{ active: false, key: "KEY", value: "<<PARAM>>", description: "" }],
           environmentVariables
         )
       ).toSubsetEqualRight([]);
@@ -80,7 +81,7 @@ describe("getters", () => {
     test("Active list of meta-data", () => {
       expect(
         getEffectiveFinalMetaData(
-          [{ active: true, key: "PARAM", value: "<<PARAM>>" }],
+          [{ active: true, key: "PARAM", value: "<<PARAM>>", description: "" }],
           environmentVariables
         )
       ).toSubsetEqualRight([

packages/hoppscotch-common/locales/en.json

@@ -242,6 +242,8 @@
     "header": "Header {count}",
     "message": "Message {count}",
     "parameter": "Parameter {count}",
+    "key": "Key {count}",
+    "description": "Description {count}",
     "protocol": "Protocol {count}",
     "value": "Value {count}",
     "variable": "Variable {count}"

packages/hoppscotch-common/src/components.d.ts

@@ -136,6 +136,7 @@ declare module 'vue' {
     HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
     HttpHeaders: typeof import('./components/http/Headers.vue')['default']
     HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
+    HttpKeyValue: typeof import('./components/http/KeyValue.vue')['default']
     HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
     HttpParameters: typeof import('./components/http/Parameters.vue')['default']
     HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']

packages/hoppscotch-common/src/components/collections/Properties.vue

@@ -4,6 +4,7 @@
     dialog
     :title="t('collection.properties')"
     :full-width-body="true"
+    styles="sm:max-w-2xl"
     @close="hideModal"
   >
     <template #body>

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -61,91 +61,19 @@
       drag-class="cursor-grabbing"
     >
       <template #item="{ element: header, index }">
-        <div
+        <HttpKeyValue
-          class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+          v-model:name="header.key"
-        >
+          v-model:value="header.value"
-          <span>
+          v-model:description="header.description"
-            <HoppButtonSecondary
+          :total="workingHeaders.length"
-              v-tippy="{
+          :index="index"
-                theme: 'tooltip',
+          :entity-id="header.id"
-                delay: [500, 20],
+          :entity-active="header.active"
-                content:
+          :is-active="header.hasOwnProperty('active')"
-                  index !== workingHeaders?.length - 1
+          :key-auto-complete-source="commonHeaders"
-                    ? t('action.drag_to_reorder')
+          @update-entity="updateHeader($event.index, $event.payload)"
-                    : null,
+          @delete-entity="deleteHeader($event)"
-              }"
+        />
-              :icon="IconGripVertical"
-              class="opacity-0"
-              :class="{
-                'draggable-handle cursor-grab group-hover:opacity-100':
-                  index !== workingHeaders?.length - 1,
-              }"
-              tabindex="-1"
-            />
-          </span>
-          <SmartEnvInput
-            v-model="header.key"
-            :placeholder="`${t('count.header', { count: index + 1 })}`"
-            :auto-complete-source="commonHeaders"
-            @change="
-              updateHeader(index, {
-                id: header.id,
-                key: $event,
-                value: header.value,
-                active: header.active,
-              })
-            "
-          />
-          <SmartEnvInput
-            v-model="header.value"
-            :placeholder="`${t('count.value', { count: index + 1 })}`"
-            @change="
-              updateHeader(index, {
-                id: header.id,
-                key: header.key,
-                value: $event,
-                active: header.active,
-              })
-            "
-          />
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="
-                header.hasOwnProperty('active')
-                  ? header.active
-                    ? t('action.turn_off')
-                    : t('action.turn_on')
-                  : t('action.turn_off')
-              "
-              :icon="
-                header.hasOwnProperty('active')
-                  ? header.active
-                    ? IconCheckCircle
-                    : IconCircle
-                  : IconCheckCircle
-              "
-              color="green"
-              @click="
-                updateHeader(index, {
-                  id: header.id,
-                  key: header.key,
-                  value: header.value,
-                  active: !header.active,
-                })
-              "
-            />
-          </span>
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.remove')"
-              :icon="IconTrash"
-              color="red"
-              @click="deleteHeader(index)"
-            />
-          </span>
-        </div>
       </template>
     </draggable>
 
@@ -170,16 +98,27 @@
               tabindex="-1"
             />
           </span>
+
           <SmartEnvInput
             v-model="header.header.key"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
             readonly
           />
+
           <SmartEnvInput
             :model-value="mask(header)"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
             readonly
           />
+
+          <input
+            :value="header.header.description"
+            :placeholder="t('count.description')"
+            class="flex flex-1 px-4 bg-transparent text-secondaryLight"
+            type="text"
+            readonly
+          />
+
           <span>
             <HoppButtonSecondary
               v-if="header.source === 'auth'"
@@ -228,11 +167,13 @@
               tabindex="-1"
             />
           </span>
+
           <SmartEnvInput
             v-model="header.header.key"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
             readonly
           />
+
           <SmartEnvInput
             :model-value="
               header.source === 'auth' ? mask(header) : header.header.value
@@ -240,6 +181,14 @@
             :placeholder="`${t('count.value', { count: index + 1 })}`"
             readonly
           />
+          <input
+            :value="header.header.description"
+            :placeholder="t('count.description')"
+            class="flex flex-1 px-4 bg-transparent text-secondaryLight"
+            type="text"
+            readonly
+          />
+
           <HoppButtonSecondary
             v-if="header.source === 'auth'"
             v-tippy="{ theme: 'tooltip' }"
@@ -280,47 +229,44 @@
 </template>
 
 <script setup lang="ts">
-import IconHelpCircle from "~icons/lucide/help-circle"
+import { useCodemirror } from "@composables/codemirror"
-import IconTrash2 from "~icons/lucide/trash-2"
+import { useI18n } from "@composables/i18n"
-import IconEdit from "~icons/lucide/edit"
+import { useColorMode } from "@composables/theming"
-import IconPlus from "~icons/lucide/plus"
+import { useToast } from "@composables/toast"
-import IconGripVertical from "~icons/lucide/grip-vertical"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconTrash from "~icons/lucide/trash"
-import IconCircle from "~icons/lucide/circle"
-import IconWrapText from "~icons/lucide/wrap-text"
-import IconArrowUpRight from "~icons/lucide/arrow-up-right"
-import IconLock from "~icons/lucide/lock"
-import IconEye from "~icons/lucide/eye"
-import IconEyeOff from "~icons/lucide/eye-off"
-import IconInfo from "~icons/lucide/info"
-import { computed, reactive, ref, watch } from "vue"
-import * as E from "fp-ts/Either"
-import * as O from "fp-ts/Option"
-import * as A from "fp-ts/Array"
-import * as RA from "fp-ts/ReadonlyArray"
-import { pipe, flow } from "fp-ts/function"
 import {
   GQLHeader,
-  rawKeyValueEntriesToString,
-  parseRawKeyValueEntriesE,
-  RawKeyValueEntry,
   HoppGQLRequest,
+  parseRawKeyValueEntriesE,
+  rawKeyValueEntriesToString,
+  RawKeyValueEntry,
 } from "@hoppscotch/data"
-import draggable from "vuedraggable-es"
-import { clone, cloneDeep, isEqual } from "lodash-es"
-import { useColorMode } from "@composables/theming"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { commonHeaders } from "~/helpers/headers"
-import { useCodemirror } from "@composables/codemirror"
-import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
+import * as A from "fp-ts/Array"
+import * as E from "fp-ts/Either"
+import * as O from "fp-ts/Option"
+import * as RA from "fp-ts/ReadonlyArray"
+import { flow, pipe } from "fp-ts/function"
+import { clone, cloneDeep, isEqual } from "lodash-es"
+import { computed, reactive, ref, toRef, watch } from "vue"
+import draggable from "vuedraggable-es"
+
 import { useNestedSetting } from "~/composables/settings"
-import { toggleNestedSetting } from "~/newstore/settings"
-import { HoppGQLHeader } from "~/helpers/graphql"
 import { throwError } from "~/helpers/functional/error"
+import { objRemoveKey } from "~/helpers/functional/object"
+import { HoppGQLHeader } from "~/helpers/graphql"
+import { commonHeaders } from "~/helpers/headers"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { toggleNestedSetting } from "~/newstore/settings"
+import IconArrowUpRight from "~icons/lucide/arrow-up-right"
+import IconEdit from "~icons/lucide/edit"
+import IconEye from "~icons/lucide/eye"
+import IconEyeOff from "~icons/lucide/eye-off"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconInfo from "~icons/lucide/info"
+import IconLock from "~icons/lucide/lock"
+import IconPlus from "~icons/lucide/plus"
+import IconTrash2 from "~icons/lucide/trash-2"
+import IconWrapText from "~icons/lucide/wrap-text"
 
 const colorMode = useColorMode()
 const t = useI18n()
@@ -371,6 +317,7 @@ const workingHeaders = ref<Array<GQLHeader & { id: number }>>([
     key: "",
     value: "",
     active: true,
+    description: "",
   },
 ])
 
@@ -385,13 +332,14 @@ watch(workingHeaders, (headersList) => {
       key: "",
       value: "",
       active: true,
+      description: "",
     })
   }
 })
 
 // Sync logic between headers and working headers
 watch(
-  props.modelValue.headers,
+  () => request.value.headers,
   (newHeadersList) => {
     // Sync should overwrite working headers
     const filteredWorkingHeaders = pipe(
@@ -422,8 +370,18 @@ watch(
       )
     }
 
-    if (!isEqual(newHeadersList, filteredBulkHeaders)) {
+    const newHeadersListKeyValuePairs = newHeadersList.map(
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
+      ({ key, value, active }) => ({
+        key,
+        value,
+        active,
+      })
+    )
+
+    if (!isEqual(newHeadersListKeyValuePairs, filteredBulkHeaders)) {
+      bulkHeaders.value = rawKeyValueEntriesToString(
+        newHeadersListKeyValuePairs
+      )
     }
   },
   { immediate: true }
@@ -458,8 +416,20 @@ watch(bulkHeaders, (newBulkHeaders) => {
     E.getOrElse(() => [] as RawKeyValueEntry[])
   )
 
-  if (!isEqual(request.value.headers, filteredBulkHeaders)) {
+  const headers = toRef(request.value, "headers")
-    request.value.headers = filteredBulkHeaders
+
+  const paramKeyValuePairs = headers.value.map(({ key, value, active }) => ({
+    key,
+    value,
+    active,
+  }))
+
+  if (!isEqual(paramKeyValuePairs, filteredBulkHeaders)) {
+    headers.value = filteredBulkHeaders.map((param, idx) => ({
+      ...param,
+      // Adding a new key-value pair in the bulk edit context won't have a corresponding entry under `request.value.headers`, hence the fallback
+      description: headers.value[idx]?.description ?? "",
+    }))
   }
 })
 
@@ -491,6 +461,7 @@ const addHeader = () => {
     key: "",
     value: "",
     active: true,
+    description: "",
   })
 }
 
@@ -547,6 +518,7 @@ const clearContent = () => {
       key: "",
       value: "",
       active: true,
+      description: "",
     },
   ]
 
@@ -644,16 +616,21 @@ const inheritedProperties = computed(() => {
         header.inheritedHeader !== undefined &&
         header.inheritedHeader.active
     )
-    .map((header, index) => ({
+    .map((header, index) => {
-      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+      const { key, value, active, description } = header.inheritedHeader
-      source: "headers",
+
-      id: `header-${index}`,
+      return {
-      header: {
+        inheritedFrom: props.inheritedProperties?.headers[index].parentName,
-        key: header.inheritedHeader?.key,
+        source: "headers",
-        value: header.inheritedHeader?.value,
+        id: `header-${index}`,
-        active: header.inheritedHeader?.active,
+        header: {
-      },
+          key,
-    }))
+          value,
+          active,
+          description,
+        },
+      }
+    })
 
   let auth = [] as {
     inheritedFrom: string

packages/hoppscotch-common/src/components/http/Body.vue

@@ -181,6 +181,7 @@ const contentTypeOverride = (tab: RESTOptionTabs) => {
       key: "Content-Type",
       value: "",
       active: true,
+      description: "",
     })
   }
 }

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -64,101 +64,24 @@
         drag-class="cursor-grabbing"
       >
         <template #item="{ element: header, index }">
-          <div
+          <HttpKeyValue
-            class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+            v-model:name="header.key"
-          >
+            v-model:value="header.value"
-            <span>
+            v-model:description="header.description"
-              <HoppButtonSecondary
+            :total="workingHeaders.length"
-                v-tippy="{
+            :index="index"
-                  theme: 'tooltip',
+            :entity-id="header.id"
-                  delay: [500, 20],
+            :entity-active="header.active"
-                  content:
+            :envs="envs"
-                    index !== workingHeaders?.length - 1
+            :is-active="header.hasOwnProperty('active')"
-                      ? t('action.drag_to_reorder')
+            :inspection-key-result="getInspectorResult(headerKeyResults, index)"
-                      : null,
+            :inspection-value-result="
-                }"
+              getInspectorResult(headerValueResults, index)
-                :icon="IconGripVertical"
+            "
-                class="opacity-0"
+            :key-auto-complete-source="commonHeaders"
-                :class="{
+            @update-entity="updateHeader($event.index, $event.payload)"
-                  'draggable-handle cursor-grab group-hover:opacity-100':
+            @delete-entity="deleteHeader($event)"
-                    index !== workingHeaders?.length - 1,
+          />
-                }"
-                tabindex="-1"
-              />
-            </span>
-            <SmartEnvInput
-              v-model="header.key"
-              :placeholder="`${t('count.header', { count: index + 1 })}`"
-              :auto-complete-source="commonHeaders"
-              :env-index="index"
-              :inspection-results="getInspectorResult(headerKeyResults, index)"
-              :auto-complete-env="true"
-              :envs="envs"
-              @change="
-                updateHeader(index, {
-                  id: header.id,
-                  key: $event,
-                  value: header.value,
-                  active: header.active,
-                })
-              "
-            />
-            <SmartEnvInput
-              v-model="header.value"
-              :placeholder="`${t('count.value', { count: index + 1 })}`"
-              :inspection-results="
-                getInspectorResult(headerValueResults, index)
-              "
-              :env-index="index"
-              :auto-complete-env="true"
-              :envs="envs"
-              @change="
-                updateHeader(index, {
-                  id: header.id,
-                  key: header.key,
-                  value: $event,
-                  active: header.active,
-                })
-              "
-            />
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  header.hasOwnProperty('active')
-                    ? header.active
-                      ? t('action.turn_off')
-                      : t('action.turn_on')
-                    : t('action.turn_off')
-                "
-                :icon="
-                  header.hasOwnProperty('active')
-                    ? header.active
-                      ? IconCheckCircle
-                      : IconCircle
-                    : IconCheckCircle
-                "
-                color="green"
-                @click="
-                  updateHeader(index, {
-                    id: header.id,
-                    key: header.key,
-                    value: header.value,
-                    active: !header.active,
-                  })
-                "
-              />
-            </span>
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.remove')"
-                :icon="IconTrash"
-                color="red"
-                @click="deleteHeader(index)"
-              />
-            </span>
-          </div>
         </template>
       </draggable>
 
@@ -183,16 +106,27 @@
                 tabindex="-1"
               />
             </span>
+
             <SmartEnvInput
               v-model="header.header.key"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               readonly
             />
+
             <SmartEnvInput
               :model-value="mask(header)"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               readonly
             />
+
+            <input
+              :value="header.header.description"
+              :placeholder="t('count.description')"
+              type="text"
+              readonly
+              class="flex flex-1 px-4 bg-transparent text-secondaryLight"
+            />
+
             <span>
               <HoppButtonSecondary
                 v-if="header.source === 'auth'"
@@ -236,11 +170,13 @@
                 tabindex="-1"
               />
             </span>
+
             <SmartEnvInput
               v-model="header.header.key"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               readonly
             />
+
             <SmartEnvInput
               :model-value="
                 header.source === 'auth' ? mask(header) : header.header.value
@@ -248,6 +184,15 @@
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               readonly
             />
+
+            <input
+              :value="header.header.description"
+              :placeholder="t('count.description')"
+              type="text"
+              readonly
+              class="flex flex-1 px-4 bg-transparent text-secondaryLight"
+            />
+
             <HoppButtonSecondary
               v-if="header.source === 'auth'"
               v-tippy="{ theme: 'tooltip' }"
@@ -289,23 +234,11 @@
 </template>
 
 <script setup lang="ts">
-import IconHelpCircle from "~icons/lucide/help-circle"
+import { useCodemirror } from "@composables/codemirror"
-import IconTrash2 from "~icons/lucide/trash-2"
+import { useI18n } from "@composables/i18n"
-import IconEdit from "~icons/lucide/edit"
+import { useReadonlyStream } from "@composables/stream"
-import IconPlus from "~icons/lucide/plus"
-import IconGripVertical from "~icons/lucide/grip-vertical"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconCircle from "~icons/lucide/circle"
-import IconTrash from "~icons/lucide/trash"
-import IconLock from "~icons/lucide/lock"
-import IconEye from "~icons/lucide/eye"
-import IconEyeOff from "~icons/lucide/eye-off"
-import IconArrowUpRight from "~icons/lucide/arrow-up-right"
-import IconWrapText from "~icons/lucide/wrap-text"
-import IconInfo from "~icons/lucide/info"
 import { useColorMode } from "@composables/theming"
-import { computed, reactive, ref, watch } from "vue"
+import { useToast } from "@composables/toast"
-import { isEqual, cloneDeep } from "lodash-es"
 import {
   HoppRESTAuth,
   HoppRESTHeader,
@@ -314,38 +247,47 @@ import {
   rawKeyValueEntriesToString,
   RawKeyValueEntry,
 } from "@hoppscotch/data"
-import { flow, pipe } from "fp-ts/function"
+import { useVModel } from "@vueuse/core"
-import * as RA from "fp-ts/ReadonlyArray"
+import { useService } from "dioc/vue"
-import * as E from "fp-ts/Either"
-import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
+import * as E from "fp-ts/Either"
+import { flow, pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as RA from "fp-ts/ReadonlyArray"
+import { cloneDeep, isEqual } from "lodash-es"
+import { computed, reactive, ref, toRef, watch } from "vue"
 import draggable from "vuedraggable-es"
-import { RESTOptionTabs } from "./RequestOptions.vue"
+
-import { useCodemirror } from "@composables/codemirror"
+import { useNestedSetting } from "~/composables/settings"
-import { commonHeaders } from "~/helpers/headers"
-import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
-import { useToast } from "@composables/toast"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { throwError } from "~/helpers/functional/error"
 import { objRemoveKey } from "~/helpers/functional/object"
+import { commonHeaders } from "~/helpers/headers"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import {
   ComputedHeader,
-  getComputedHeaders,
   getComputedAuthHeaders,
+  getComputedHeaders,
 } from "~/helpers/utils/EffectiveURL"
 import {
   AggregateEnvironment,
   aggregateEnvs$,
   getAggregateEnvs,
 } from "~/newstore/environments"
-import { useVModel } from "@vueuse/core"
+import { toggleNestedSetting } from "~/newstore/settings"
-import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
-import { useNestedSetting } from "~/composables/settings"
+import IconArrowUpRight from "~icons/lucide/arrow-up-right"
-import { toggleNestedSetting } from "~/newstore/settings"
+import IconEdit from "~icons/lucide/edit"
-import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import IconEye from "~icons/lucide/eye"
+import IconEyeOff from "~icons/lucide/eye-off"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconInfo from "~icons/lucide/info"
+import IconLock from "~icons/lucide/lock"
+import IconPlus from "~icons/lucide/plus"
+import IconTrash2 from "~icons/lucide/trash-2"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { RESTOptionTabs } from "./RequestOptions.vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -407,6 +349,7 @@ const workingHeaders = ref<Array<WorkingHeader>>([
     key: "",
     value: "",
     active: true,
+    description: "",
   },
 ])
 
@@ -421,6 +364,7 @@ watch(workingHeaders, (headersList) => {
       key: "",
       value: "",
       active: true,
+      description: "",
     })
   }
 })
@@ -458,8 +402,18 @@ watch(
       )
     }
 
-    if (!isEqual(newHeadersList, filteredBulkHeaders)) {
+    const newHeadersListKeyValuePairs = newHeadersList.map(
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
+      ({ key, value, active }) => ({
+        key,
+        value,
+        active,
+      })
+    )
+
+    if (!isEqual(newHeadersListKeyValuePairs, filteredBulkHeaders)) {
+      bulkHeaders.value = rawKeyValueEntriesToString(
+        newHeadersListKeyValuePairs
+      )
     }
   },
   { immediate: true }
@@ -493,8 +447,20 @@ watch(bulkHeaders, (newBulkHeaders) => {
     E.getOrElse(() => [] as RawKeyValueEntry[])
   )
 
-  if (!isEqual(props.modelValue, filteredBulkHeaders)) {
+  const headers = toRef(request.value, "headers")
-    request.value.headers = filteredBulkHeaders
+
+  const paramKeyValuePairs = headers.value.map(({ key, value, active }) => ({
+    key,
+    value,
+    active,
+  }))
+
+  if (!isEqual(paramKeyValuePairs, filteredBulkHeaders)) {
+    headers.value = filteredBulkHeaders.map((param, idx) => ({
+      ...param,
+      // Adding a new key-value pair in the bulk edit context won't have a corresponding entry under `headers.value`, hence the fallback
+      description: headers.value[idx]?.description ?? "",
+    }))
   }
 })
 
@@ -504,6 +470,7 @@ const addHeader = () => {
     key: "",
     value: "",
     active: true,
+    description: "",
   })
 }
 
@@ -563,6 +530,7 @@ const clearContent = () => {
       key: "",
       value: "",
       active: true,
+      description: "",
     },
   ]
 
@@ -600,16 +568,21 @@ const inheritedProperties = computed(() => {
         header.inheritedHeader !== undefined &&
         header.inheritedHeader.active
     )
-    .map((header, index) => ({
+    .map((header, index) => {
-      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+      const { key, value, active, description } = header.inheritedHeader
-      source: "headers",
+
-      id: `header-${index}`,
+      return {
-      header: {
+        inheritedFrom: props.inheritedProperties?.headers[index].parentName,
-        key: header.inheritedHeader?.key,
+        source: "headers",
-        value: header.inheritedHeader?.value,
+        id: `header-${index}`,
-        active: header.inheritedHeader?.active,
+        header: {
-      },
+          key,
-    }))
+          value,
+          active,
+          description,
+        },
+      }
+    })
 
   let auth = [] as {
     inheritedFrom: string

packages/hoppscotch-common/src/components/http/KeyValue.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    class="flex border-b divide-x draggable-content group divide-dividerLight border-dividerLight"
+  >
+    <span>
+      <HoppButtonSecondary
+        v-tippy="{
+          theme: 'tooltip',
+          delay: [500, 20],
+          content: index !== total - 1 ? t('action.drag_to_reorder') : null,
+        }"
+        :icon="IconGripVertical"
+        class="opacity-0"
+        :class="{
+          'draggable-handle cursor-grab group-hover:opacity-100':
+            index !== total - 1,
+        }"
+        tabindex="-1"
+      />
+    </span>
+    <SmartEnvInput
+      :model-value="name"
+      :placeholder="t('count.key')"
+      :auto-complete-source="keyAutoCompleteSource"
+      :auto-complete-env="true"
+      :envs="envs"
+      :inspection-results="inspectionKeyResult"
+      @update:model-value="emit('update:name', $event)"
+      @change="
+        updateEntity(index, {
+          id: entityId,
+          key: $event,
+          value: value,
+          active: entityActive,
+          description: description ?? '',
+        })
+      "
+    />
+    <SmartEnvInput
+      :model-value="value"
+      :placeholder="t('count.value')"
+      :auto-complete-env="true"
+      :envs="envs"
+      :inspection-results="inspectionValueResult"
+      @update:model-value="emit('update:value', $event)"
+      @change="
+        updateEntity(index, {
+          id: entityId,
+          key: name,
+          value: $event,
+          active: entityActive,
+          description: description ?? '',
+        })
+      "
+    />
+
+    <input
+      :value="description"
+      :placeholder="t('count.description')"
+      class="flex flex-1 px-4 bg-transparent"
+      type="text"
+      @update:value="emit('update:description', $event.target.value)"
+      @input="
+        updateEntity(index, {
+          id: entityId,
+          key: name,
+          value,
+          active: entityActive,
+          description: ($event.target as HTMLInputElement).value,
+        })
+      "
+    />
+    <span>
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          isActive
+            ? entityActive
+              ? t('action.turn_off')
+              : t('action.turn_on')
+            : t('action.turn_off')
+        "
+        :icon="
+          isActive
+            ? entityActive
+              ? IconCheckCircle
+              : IconCircle
+            : IconCheckCircle
+        "
+        color="green"
+        @click="
+          updateEntity(index, {
+            id: entityId,
+            key: name,
+            value: value,
+            active: isActive ? !entityActive : false,
+          })
+        "
+      />
+    </span>
+    <span>
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.remove')"
+        :icon="IconTrash"
+        color="red"
+        @click="deleteEntity(index)"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconGripVertical from "~icons/lucide/grip-vertical"
+import IconCheckCircle from "~icons/lucide/check-circle"
+import IconCircle from "~icons/lucide/circle"
+import IconTrash from "~icons/lucide/trash"
+import { useI18n } from "~/composables/i18n"
+import { AggregateEnvironment } from "~/newstore/environments"
+import { InspectorResult } from "~/services/inspection"
+
+const t = useI18n()
+
+defineProps<{
+  total: number
+  index: number
+  entityId: number
+  isActive: boolean
+  entityActive: boolean
+  name: string
+  value: string
+  inspectionKeyResult?: InspectorResult[]
+  inspectionValueResult?: InspectorResult[]
+  description?: string
+  envs?: AggregateEnvironment[]
+  keyAutoCompleteSource?: string[]
+}>()
+
+const emit = defineEmits<{
+  (e: "update:name", value: string): void
+  (e: "update:value", value: string): void
+  (e: "update:description", value: string): void
+  (e: "deleteEntity", value: number): void
+  (e: "updateEntity", { index, payload }: { index: number; payload: any }): void
+}>()
+
+const updateEntity = (index: number, payload: any) => {
+  emit("updateEntity", {
+    index,
+    payload,
+  })
+}
+
+const deleteEntity = (index: number) => {
+  emit("deleteEntity", index)
+}
+</script>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -59,102 +59,25 @@
         drag-class="cursor-grabbing"
       >
         <template #item="{ element: param, index }">
-          <div
+          <HttpKeyValue
-            class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+            v-model:name="param.key"
-          >
+            v-model:value="param.value"
-            <span>
+            v-model:description="param.description"
-              <HoppButtonSecondary
+            :total="workingParams.length"
-                v-tippy="{
+            :index="index"
-                  theme: 'tooltip',
+            :entity-id="param.id"
-                  delay: [500, 20],
+            :entity-active="param.active"
-                  content:
+            :envs="envs"
-                    index !== workingParams?.length - 1
+            :is-active="param.hasOwnProperty('active')"
-                      ? t('action.drag_to_reorder')
+            :inspection-key-result="
-                      : null,
+              getInspectorResult(parameterKeyResults, index)
-                }"
+            "
-                :icon="IconGripVertical"
+            :inspection-value-result="
-                class="opacity-0"
+              getInspectorResult(parameterValueResults, index)
-                :class="{
+            "
-                  'draggable-handle cursor-grab group-hover:opacity-100':
+            @update-entity="updateParam($event.index, $event.payload)"
-                    index !== workingParams?.length - 1,
+            @delete-entity="deleteParam($event)"
-                }"
+          />
-                tabindex="-1"
-              />
-            </span>
-            <SmartEnvInput
-              v-model="param.key"
-              :placeholder="`${t('count.parameter', { count: index + 1 })}`"
-              :inspection-results="
-                getInspectorResult(parameterKeyResults, index)
-              "
-              :auto-complete-env="true"
-              :envs="envs"
-              @change="
-                updateParam(index, {
-                  id: param.id,
-                  key: $event,
-                  value: param.value,
-                  active: param.active,
-                })
-              "
-            />
-            <SmartEnvInput
-              v-model="param.value"
-              :placeholder="`${t('count.value', { count: index + 1 })}`"
-              :inspection-results="
-                getInspectorResult(parameterValueResults, index)
-              "
-              :auto-complete-env="true"
-              :envs="envs"
-              @change="
-                updateParam(index, {
-                  id: param.id,
-                  key: param.key,
-                  value: $event,
-                  active: param.active,
-                })
-              "
-            />
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  param.hasOwnProperty('active')
-                    ? param.active
-                      ? t('action.turn_off')
-                      : t('action.turn_on')
-                    : t('action.turn_off')
-                "
-                :icon="
-                  param.hasOwnProperty('active')
-                    ? param.active
-                      ? IconCheckCircle
-                      : IconCircle
-                    : IconCheckCircle
-                "
-                color="green"
-                @click="
-                  updateParam(index, {
-                    id: param.id,
-                    key: param.key,
-                    value: param.value,
-                    active: param.hasOwnProperty('active')
-                      ? !param.active
-                      : false,
-                  })
-                "
-              />
-            </span>
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.remove')"
-                :icon="IconTrash"
-                color="red"
-                @click="deleteParam(index)"
-              />
-            </span>
-          </div>
         </template>
       </draggable>
       <HoppSmartPlaceholder
@@ -181,10 +104,6 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconPlus from "~icons/lucide/plus"
-import IconGripVertical from "~icons/lucide/grip-vertical"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconCircle from "~icons/lucide/circle"
-import IconTrash from "~icons/lucide/trash"
 import IconWrapText from "~icons/lucide/wrap-text"
 import { reactive, ref, watch } from "vue"
 import { flow, pipe } from "fp-ts/function"
@@ -264,6 +183,7 @@ const workingParams = ref<Array<HoppRESTParam & { id: number }>>([
     key: "",
     value: "",
     active: true,
+    description: "",
   },
 ])
 
@@ -275,6 +195,7 @@ watch(workingParams, (paramsList) => {
       key: "",
       value: "",
       active: true,
+      description: "",
     })
   }
 })
@@ -312,8 +233,16 @@ watch(
       )
     }
 
-    if (!isEqual(newParamsList, filteredBulkParams)) {
+    const newParamsListKeyValuePairs = newParamsList.map(
-      bulkParams.value = rawKeyValueEntriesToString(newParamsList)
+      ({ key, value, active }) => ({
+        key,
+        value,
+        active,
+      })
+    )
+
+    if (!isEqual(newParamsListKeyValuePairs, filteredBulkParams)) {
+      bulkParams.value = rawKeyValueEntriesToString(newParamsListKeyValuePairs)
     }
   },
   { immediate: true }
@@ -347,8 +276,18 @@ watch(bulkParams, (newBulkParams) => {
     E.getOrElse(() => [] as RawKeyValueEntry[])
   )
 
-  if (!isEqual(params.value, filteredBulkParams)) {
+  const paramKeyValuePairs = params.value.map(({ key, value, active }) => ({
-    params.value = filteredBulkParams
+    key,
+    value,
+    active,
+  }))
+
+  if (!isEqual(paramKeyValuePairs, filteredBulkParams)) {
+    params.value = filteredBulkParams.map((param, idx) => ({
+      ...param,
+      // Adding a new key-value pair in the bulk edit context won't have a corresponding entry under `params.value`, hence the fallback
+      description: params.value[idx]?.description ?? "",
+    }))
   }
 })
 
@@ -358,6 +297,7 @@ const addParam = () => {
     key: "",
     value: "",
     active: true,
+    description: "",
   })
 }
 
@@ -414,6 +354,7 @@ const clearContent = () => {
       key: "",
       value: "",
       active: true,
+      description: "",
     },
   ]
 

packages/hoppscotch-common/src/helpers/curl/__tests__/curlparser.spec.js

@@ -112,31 +112,37 @@ const samples = [
           key: "User-Agent",
           value:
             "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0",
+          description: "",
         },
         {
           active: true,
           key: "Accept",
           value: "application/json, text/plain, */*",
+          description: "",
         },
         {
           active: true,
           key: "Accept-Language",
           value: "en",
+          description: "",
         },
         {
           active: true,
           key: "Origin",
           value: "http://localhost:3012",
+          description: "",
         },
         {
           active: true,
           key: "Connection",
           value: "keep-alive",
+          description: "",
         },
         {
           active: true,
           key: "Referer",
           value: "http://localhost:3012/crm/company/4",
+          description: "",
         },
       ],
       params: [],
@@ -180,6 +186,7 @@ const samples = [
           active: true,
           key: "bar",
           value: "baz",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -204,11 +211,13 @@ const samples = [
           active: true,
           key: "tool",
           value: "curl",
+          description: "",
         },
         {
           active: true,
           key: "age",
           value: "old",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -270,6 +279,7 @@ const samples = [
           active: true,
           key: "Accept",
           value: "application/json",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -366,11 +376,13 @@ const samples = [
           active: true,
           key: "tool",
           value: "curl",
+          description: "",
         },
         {
           active: true,
           key: "platform",
           value: "hoppscotch",
+          description: "",
         },
       ],
       headers: [],
@@ -415,11 +427,13 @@ const samples = [
           active: true,
           key: "and",
           value: "params",
+          description: "",
         },
         {
           active: true,
           key: "stay",
           value: "tuned",
+          description: "",
         },
       ],
       headers: [
@@ -427,16 +441,19 @@ const samples = [
           active: true,
           key: "user-agent",
           value: "Mozilla/5.0",
+          description: "",
         },
         {
           active: true,
           key: "accept",
           value: "text/html",
+          description: "",
         },
         {
           active: true,
           key: "cookie",
           value: "cookie-cookie",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -497,33 +514,39 @@ const samples = [
           active: true,
           key: "authority",
           value: "hoppscotch.io",
+          description: "",
         },
         {
           active: true,
           key: "sec-ch-ua",
           value:
             '" Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"',
+          description: "",
         },
         {
           active: true,
           key: "accept",
           value: "*/*",
+          description: "",
         },
         {
           active: true,
           key: "user-agent",
           value:
             "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36",
+          description: "",
         },
         {
           active: true,
           key: "sec-ch-ua-platform",
           value: '"Windows"',
+          description: "",
         },
         {
           active: true,
           key: "accept-language",
           value: "en-US,en;q=0.9,ml;q=0.8",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -563,6 +586,7 @@ const samples = [
           active: true,
           key: "hello",
           value: "there",
+          description: "",
         },
       ],
       headers: [
@@ -570,6 +594,7 @@ const samples = [
           active: true,
           key: "something",
           value: "other-thing",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -594,6 +619,7 @@ const samples = [
           active: true,
           key: "something",
           value: "other-thing",
+          description: "",
         },
       ],
       body: {
@@ -618,6 +644,7 @@ const samples = [
           active: true,
           key: "hello",
           value: "there",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -695,6 +722,7 @@ const samples = [
           active: true,
           key: "User-Agent",
           value: "pinephone",
+          description: "",
         },
       ],
       body: {
@@ -742,6 +770,7 @@ const samples = [
           active: true,
           key: "tool",
           value: "hopp",
+          description: "",
         },
       ],
       preRequestScript: "",
@@ -893,6 +922,7 @@ data2: {"type":"test2","typeId":"123"}`,
           active: true,
           key: "Accept",
           value: "application/vnd.test-data.v2.1+json",
+          description: "",
         },
       ],
       preRequestScript: "",

packages/hoppscotch-common/src/helpers/curl/curlparser.ts

@@ -3,28 +3,28 @@
  * just adding the /browser import as a fix for now, which does not have type info on DefinitelyTyped.
  * remove/update this comment before merging the vue3 port.
  */
-import parser from "yargs-parser/browser"
-import * as O from "fp-ts/Option"
-import * as A from "fp-ts/Array"
-import { pipe, flow } from "fp-ts/function"
 import {
   FormDataKeyValue,
   HoppRESTReqBody,
   makeRESTRequest,
 } from "@hoppscotch/data"
+import * as A from "fp-ts/Array"
+import { flow, pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import parser from "yargs-parser/browser"
 import { getAuthObject } from "./sub_helpers/auth"
 import { getHeaders, recordToHoppHeaders } from "./sub_helpers/headers"
 // import { getCookies } from "./sub_helpers/cookies"
-import { getQueries } from "./sub_helpers/queries"
-import { getMethod } from "./sub_helpers/method"
-import { concatParams, getURLObject } from "./sub_helpers/url"
-import { preProcessCurlCommand } from "./sub_helpers/preproc"
-import { getBody, getFArgumentMultipartData } from "./sub_helpers/body"
-import { getDefaultRESTRequest } from "../rest/default"
 import {
-  objHasProperty,
   objHasArrayProperty,
+  objHasProperty,
 } from "~/helpers/functional/object"
+import { getDefaultRESTRequest } from "../rest/default"
+import { getBody, getFArgumentMultipartData } from "./sub_helpers/body"
+import { getMethod } from "./sub_helpers/method"
+import { preProcessCurlCommand } from "./sub_helpers/preproc"
+import { getQueries } from "./sub_helpers/queries"
+import { concatParams, getURLObject } from "./sub_helpers/url"
 
 const defaultRESTReq = getDefaultRESTRequest()
 

packages/hoppscotch-common/src/helpers/curl/sub_helpers/headers.ts

@@ -1,14 +1,14 @@
-import parser from "yargs-parser"
-import { pipe, flow } from "fp-ts/function"
 import { HoppRESTHeader } from "@hoppscotch/data"
 import * as A from "fp-ts/Array"
-import * as S from "fp-ts/string"
+import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
-import { tupleToRecord } from "~/helpers/functional/record"
+import * as S from "fp-ts/string"
+import parser from "yargs-parser"
 import {
-  objHasProperty,
   objHasArrayProperty,
+  objHasProperty,
 } from "~/helpers/functional/object"
+import { tupleToRecord } from "~/helpers/functional/record"
 
 const getHeaderPair = flow(
   S.split(": "),
@@ -66,6 +66,7 @@ export const recordToHoppHeaders = (
       key,
       value: headers[key],
       active: true,
+      description: "",
     })),
     A.filter(
       (header) =>

packages/hoppscotch-common/src/helpers/curl/sub_helpers/queries.ts

@@ -1,8 +1,8 @@
-import { pipe, flow } from "fp-ts/function"
-import * as O from "fp-ts/Option"
-import * as A from "fp-ts/Array"
-import * as Sep from "fp-ts/Separated"
 import { HoppRESTParam } from "@hoppscotch/data"
+import * as A from "fp-ts/Array"
+import { flow, pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as Sep from "fp-ts/Separated"
 
 const isDangling = ([, value]: [string, string]) => !value
 
@@ -26,6 +26,7 @@ export function getQueries(params: Array<[string, string]>): {
             key,
             value,
             active: true,
+            description: "",
           })),
           A.map(([key]) => key)
         ),

packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts

@@ -5,10 +5,10 @@ import {
   HoppRESTParam,
   HoppRESTReqBody,
   HoppRESTRequest,
+  HoppRESTRequestVariable,
   knownContentTypes,
   makeCollection,
   makeRESTRequest,
-  HoppRESTRequestVariable,
 } from "@hoppscotch/data"
 
 import * as A from "fp-ts/Array"
@@ -16,6 +16,7 @@ import * as TE from "fp-ts/TaskEither"
 import * as TO from "fp-ts/TaskOption"
 import { pipe } from "fp-ts/function"
 import { ImportRequest, convert } from "insomnia-importers"
+import { Header, Parameter } from "insomnia-importers/dist/src/entities"
 
 import { IMPORTER_INVALID_FILE_FORMAT } from "."
 import { replaceInsomniaTemplating } from "./insomniaEnv"
@@ -36,10 +37,13 @@ type InsomniaPathParameter = {
 }
 
 type InsomniaFolderResource = ImportRequest & { _type: "request_group" }
-type InsomniaRequestResource = ImportRequest & {
+type InsomniaRequestResource = Omit<ImportRequest, "headers" | "parameters"> & {
   _type: "request"
 } & {
   pathParameters?: InsomniaPathParameter[]
+} & {
+  headers: (Header & { description: string })[]
+  parameters: (Parameter & { description: string })[]
 }
 
 const parseInsomniaDoc = (content: string) =>
@@ -192,6 +196,7 @@ const getHoppReqHeaders = (req: InsomniaRequestResource): HoppRESTHeader[] =>
     key: replaceVarTemplating(header.name),
     value: replaceVarTemplating(header.value),
     active: !header.disabled,
+    description: header.description ?? "",
   })) ?? []
 
 const getHoppReqParams = (req: InsomniaRequestResource): HoppRESTParam[] =>
@@ -199,6 +204,7 @@ const getHoppReqParams = (req: InsomniaRequestResource): HoppRESTParam[] =>
     key: replaceVarTemplating(param.name),
     value: replaceVarTemplating(param.value ?? ""),
     active: !(param.disabled ?? false),
+    description: param.description ?? "",
   })) ?? []
 
 const getHoppReqVariables = (

packages/hoppscotch-common/src/helpers/import-export/import/openapi.ts

@@ -79,6 +79,7 @@ const parseOpenAPIParams = (params: OpenAPIParamsType[]): HoppRESTParam[] =>
               key: param.name,
               value: "", // TODO: Can we do anything more ? (parse default values maybe)
               active: true,
+              description: param.description ?? "",
             }
         )
       )
@@ -113,14 +114,14 @@ const parseOpenAPIHeaders = (params: OpenAPIParamsType[]): HoppRESTHeader[] =>
     A.filterMap(
       flow(
         O.fromPredicate((param) => param.in === "header"),
-        O.map(
+        O.map((header) => {
-          (header) =>
+          return <HoppRESTParam>{
-            <HoppRESTParam>{
+            key: header.name,
-              key: header.name,
+            value: "", // TODO: Can we do anything more ? (parse default values maybe)
-              value: "", // TODO: Can we do anything more ? (parse default values maybe)
+            active: true,
-              active: true,
+            description: header.description ?? "",
-            }
+          }
-        )
+        })
       )
     )
   )

packages/hoppscotch-common/src/helpers/import-export/import/postman.ts

@@ -1,34 +1,35 @@
 import {
-  Collection as PMCollection,
+  FormDataKeyValue,
-  Item,
+  HoppCollection,
-  ItemGroup,
-  QueryParam,
-  RequestAuthDefinition,
-  VariableDefinition,
-  Variable,
-} from "postman-collection"
-import {
   HoppRESTAuth,
   HoppRESTHeader,
   HoppRESTParam,
   HoppRESTReqBody,
   HoppRESTRequest,
-  makeRESTRequest,
-  HoppCollection,
-  makeCollection,
-  ValidContentTypes,
-  knownContentTypes,
-  FormDataKeyValue,
   HoppRESTRequestVariable,
+  knownContentTypes,
+  makeCollection,
+  makeRESTRequest,
+  ValidContentTypes,
 } from "@hoppscotch/data"
-import { pipe, flow } from "fp-ts/function"
-import * as S from "fp-ts/string"
 import * as A from "fp-ts/Array"
+import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
+import * as S from "fp-ts/string"
 import * as TE from "fp-ts/TaskEither"
-import { IMPORTER_INVALID_FILE_FORMAT } from "."
+import {
-import { PMRawLanguage } from "~/types/pm-coll-exts"
+  DescriptionDefinition,
+  Item,
+  ItemGroup,
+  Collection as PMCollection,
+  QueryParam,
+  RequestAuthDefinition,
+  Variable,
+  VariableDefinition,
+} from "postman-collection"
 import { stringArrayJoin } from "~/helpers/functional/array"
+import { PMRawLanguage } from "~/types/pm-coll-exts"
+import { IMPORTER_INVALID_FILE_FORMAT } from "."
 
 const safeParseJSON = (jsonStr: string) => O.tryCatch(() => JSON.parse(jsonStr))
 
@@ -64,14 +65,29 @@ const readPMCollection = (def: string) =>
     )
   )
 
+const parseDescription = (descField?: string | DescriptionDefinition) => {
+  if (!descField) {
+    return ""
+  }
+
+  if (typeof descField === "string") {
+    return descField
+  }
+
+  return descField.content
+}
+
 const getHoppReqHeaders = (item: Item): HoppRESTHeader[] =>
   pipe(
     item.request.headers.all(),
     A.map((header) => {
+      const description = parseDescription(header.description)
+
       return <HoppRESTHeader>{
         key: replacePMVarTemplating(header.key),
         value: replacePMVarTemplating(header.value),
         active: !header.disabled,
+        description,
       }
     })
   )
@@ -84,10 +100,13 @@ const getHoppReqParams = (item: Item): HoppRESTParam[] => {
         param.key !== undefined && param.key !== null && param.key.length > 0
     ),
     A.map((param) => {
+      const description = parseDescription(param.description)
+
       return <HoppRESTHeader>{
         key: replacePMVarTemplating(param.key),
         value: replacePMVarTemplating(param.value ?? ""),
         active: !param.disabled,
+        description,
       }
     })
   )

packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts

@@ -93,6 +93,7 @@ export const getComputedAuthHeaders = (
       active: true,
       key: "Authorization",
       value: `Basic ${btoa(`${username}:${password}`)}`,
+      description: "",
     })
   } else if (
     request.auth.authType === "bearer" ||
@@ -111,6 +112,7 @@ export const getComputedAuthHeaders = (
           ? parseTemplateString(token, envVars, false, showKeyIfSecret)
           : token
       }`,
+      description: "",
     })
   } else if (request.auth.authType === "api-key") {
     const { key, addTo } = request.auth
@@ -126,6 +128,7 @@ export const getComputedAuthHeaders = (
               showKeyIfSecret
             )
           : request.auth.value ?? "",
+        description: "",
       })
     }
   }
@@ -164,6 +167,7 @@ export const getComputedBodyHeaders = (
       active: true,
       key: "content-type",
       value: req.body.contentType,
+      description: "",
     },
   ]
 }
@@ -249,6 +253,7 @@ export const getComputedParams = (
           active: true,
           key: parseTemplateString(req.auth.key, envVars, false, true),
           value: parseTemplateString(req.auth.value, envVars, false, true),
+          description: "",
         },
       },
     ]
@@ -263,6 +268,7 @@ export const getComputedParams = (
         active: true,
         key: "access_token",
         value: parseTemplateString(grantTypeInfo.token, envVars, false, true),
+        description: "",
       },
     },
   ]

packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts

@@ -92,7 +92,7 @@ export class ParameterMenuService extends Service implements ContextMenu {
     // add the parameters to the current request parameters
     tabService.currentActiveTab.value.document.request.params = [
       ...tabService.currentActiveTab.value.document.request.params,
-      ...queryParams,
+      ...queryParams.map((param) => ({ ...param, description: "" })),
     ]
 
     if (newURL) {

packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts

@@ -24,7 +24,7 @@ const DEFAULT_SETTINGS = getDefaultSettings()
 
 export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
   {
-    v: 2,
+    v: 3,
     name: "Echo",
     folders: [],
     requests: [
@@ -49,12 +49,12 @@ export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
 
 export const GQL_COLLECTIONS_MOCK: HoppCollection[] = [
   {
-    v: 2,
+    v: 3,
     name: "Echo",
     folders: [],
     requests: [
       {
-        v: 5,
+        v: 6,
         name: "Echo test",
         url: "https://echo.hoppscotch.io/graphql",
         headers: [],
@@ -154,7 +154,7 @@ export const GQL_HISTORY_MOCK: GQLHistoryEntry[] = [
   {
     v: 1,
     request: {
-      v: 5,
+      v: 6,
       name: "Untitled",
       url: "https://echo.hoppscotch.io/graphql",
       query: "query Request { url }",
@@ -175,7 +175,7 @@ export const GQL_TAB_STATE_MOCK: PersistableTabState<HoppGQLDocument> = {
       tabID: "5edbe8d4-65c9-4381-9354-5f1bf05d8ccc",
       doc: {
         request: {
-          v: 5,
+          v: 6,
           name: "Untitled",
           url: "https://echo.hoppscotch.io/graphql",
           headers: [],

packages/hoppscotch-data/src/collection/index.ts

@@ -2,6 +2,7 @@ import { InferredEntity, createVersionedEntity } from "verzod"
 
 import V1_VERSION from "./v/1"
 import V2_VERSION from "./v/2"
+import V3_VERSION from "./v/3"
 
 import { z } from "zod"
 import { translateToNewRequest } from "../rest"
@@ -12,10 +13,11 @@ const versionedObject = z.object({
 })
 
 export const HoppCollection = createVersionedEntity({
-  latestVersion: 2,
+  latestVersion: 3,
   versionMap: {
     1: V1_VERSION,
     2: V2_VERSION,
+    3: V3_VERSION,
   },
   getVersion(data) {
     const versionCheck = versionedObject.safeParse(data)
@@ -31,7 +33,7 @@ export const HoppCollection = createVersionedEntity({
 
 export type HoppCollection = InferredEntity<typeof HoppCollection>
 
-export const CollectionSchemaVersion = 2
+export const CollectionSchemaVersion = 3
 
 /**
  * Generates a Collection object. This ignores the version number object

packages/hoppscotch-data/src/collection/v/2.ts

@@ -1,11 +1,15 @@
 import { defineVersion, entityReference } from "verzod"
 import { z } from "zod"
-import { HoppRESTRequest, HoppRESTAuth } from "../../rest"
-import { HoppGQLRequest, HoppGQLAuth, GQLHeader } from "../../graphql"
-import { V1_SCHEMA } from "./1"
-import { HoppRESTHeaders } from "../../rest/v/1"
 
-const baseCollectionSchema = z.object({
+import { HoppGQLRequest } from "../../graphql"
+import { GQLHeader } from "../../graphql/v/1"
+import { HoppGQLAuth } from "../../graphql/v/5"
+import { HoppRESTRequest } from "../../rest"
+import { HoppRESTHeaders } from "../../rest/v/1"
+import { HoppRESTAuth } from "../../rest/v/5"
+import { V1_SCHEMA } from "./1"
+
+export const v2_baseCollectionSchema = z.object({
   v: z.literal(2),
   id: z.optional(z.string()), // For Firestore ID data
 
@@ -23,17 +27,18 @@ const baseCollectionSchema = z.object({
   headers: z.union([HoppRESTHeaders, z.array(GQLHeader)]),
 })
 
-type Input = z.input<typeof baseCollectionSchema> & {
+type Input = z.input<typeof v2_baseCollectionSchema> & {
   folders: Input[]
 }
 
-type Output = z.output<typeof baseCollectionSchema> & {
+type Output = z.output<typeof v2_baseCollectionSchema> & {
   folders: Output[]
 }
 
-export const V2_SCHEMA: z.ZodType<Output, z.ZodTypeDef, Input> = baseCollectionSchema.extend({
+export const V2_SCHEMA: z.ZodType<Output, z.ZodTypeDef, Input> =
-  folders: z.lazy(() => z.array(V2_SCHEMA)),
+  v2_baseCollectionSchema.extend({
-})
+    folders: z.lazy(() => z.array(V2_SCHEMA)),
+  })
 
 export default defineVersion({
   initial: false,

packages/hoppscotch-data/src/collection/v/3.ts

@@ -0,0 +1,48 @@
+import { defineVersion } from "verzod"
+import { z } from "zod"
+
+import { GQLHeader as GQLHeaderV1 } from "../../graphql/v/1"
+import { GQLHeader as GQLHeaderV2 } from "../../graphql/v/6"
+import { HoppRESTHeaders as V1_HoppRESTHeaders } from "../../rest/v/1"
+import { HoppRESTHeaders as V2_HoppRESTHeaders } from "../../rest/v/7"
+import { v2_baseCollectionSchema, V2_SCHEMA } from "./2"
+
+const v3_baseCollectionSchema = v2_baseCollectionSchema.extend({
+  v: z.literal(3),
+  headers: z.union([V2_HoppRESTHeaders, z.array(GQLHeaderV2)]),
+})
+
+type Input = z.input<typeof v3_baseCollectionSchema> & {
+  folders: Input[]
+}
+
+type Output = z.output<typeof v3_baseCollectionSchema> & {
+  folders: Output[]
+}
+
+export const V3_SCHEMA: z.ZodType<Output, z.ZodTypeDef, Input> =
+  v3_baseCollectionSchema.extend({
+    folders: z.lazy(() => z.array(V3_SCHEMA)),
+  })
+
+export default defineVersion({
+  initial: false,
+  schema: V3_SCHEMA,
+  up(old: z.infer<typeof V2_SCHEMA>) {
+    const headers = (old.headers as V1_HoppRESTHeaders | GQLHeaderV1[]).map(
+      (header) => ({
+        ...header,
+        description: "",
+      })
+    )
+
+    // @ts-expect-error
+    const result: z.infer<typeof V3_SCHEMA> = {
+      ...old,
+      v: 3,
+      headers,
+    }
+
+    return result
+  },
+})

packages/hoppscotch-data/src/graphql/index.ts

@@ -5,33 +5,35 @@ import V2_VERSION from "./v/2"
 import V3_VERSION from "./v/3"
 import V4_VERSION from "./v/4"
 import V5_VERSION from "./v/5"
+import V6_VERSION from "./v/6"
 
-export { GQLHeader } from "./v/1"
 export {
   HoppGQLAuthBasic,
   HoppGQLAuthBearer,
-  HoppGQLAuthNone,
   HoppGQLAuthInherit,
+  HoppGQLAuthNone,
 } from "./v/2"
+export { GQLHeader } from "./v/6"
 
-export { HoppGQLAuthOAuth2, HoppGQLAuth } from "./v/5"
+export { HoppGQLAuth, HoppGQLAuthOAuth2 } from "./v/5"
 
 export { HoppGQLAuthAPIKey } from "./v/4"
 
-export const GQL_REQ_SCHEMA_VERSION = 5
+export const GQL_REQ_SCHEMA_VERSION = 6
 
 const versionedObject = z.object({
   v: z.number(),
 })
 
 export const HoppGQLRequest = createVersionedEntity({
-  latestVersion: 5,
+  latestVersion: 6,
   versionMap: {
     1: V1_VERSION,
     2: V2_VERSION,
     3: V3_VERSION,
     4: V4_VERSION,
     5: V5_VERSION,
+    6: V6_VERSION,
   },
   getVersion(x) {
     const result = versionedObject.safeParse(x)

packages/hoppscotch-data/src/graphql/v/6.ts

@@ -0,0 +1,37 @@
+import { defineVersion } from "verzod"
+import { z } from "zod"
+
+import { V5_SCHEMA } from "./5"
+
+export const GQLHeader = z.object({
+  key: z.string().catch(""),
+  value: z.string().catch(""),
+  active: z.boolean().catch(true),
+  description: z.string().catch(""),
+})
+
+export type GQLHeader = z.infer<typeof GQLHeader>
+
+export const V6_SCHEMA = V5_SCHEMA.extend({
+  v: z.literal(6),
+  headers: z.array(GQLHeader).catch([]),
+})
+
+export default defineVersion({
+  schema: V6_SCHEMA,
+  initial: false,
+  up(old: z.infer<typeof V6_SCHEMA>) {
+    const headers = old.headers.map((header) => {
+      return {
+        ...header,
+        description: "",
+      }
+    })
+
+    return {
+      ...old,
+      v: 6 as const,
+      headers,
+    }
+  },
+})

packages/hoppscotch-data/src/rest/index.ts

@@ -14,7 +14,8 @@ import V4_VERSION from "./v/4"
 import V5_VERSION from "./v/5"
 import V6_VERSION, { HoppRESTReqBody } from "./v/6"
 
-import { HoppRESTHeaders, HoppRESTParams } from "./v/1"
+import { HoppRESTHeaders, HoppRESTParams } from "./v/7"
+import V7_VERSION from "./v/7"
 
 import { HoppRESTRequestVariables } from "./v/2"
 import { HoppRESTAuth } from "./v/5"
@@ -27,7 +28,6 @@ export {
   HoppRESTAuthBearer,
   HoppRESTAuthInherit,
   HoppRESTAuthNone,
-  HoppRESTHeaders,
   HoppRESTReqBodyFormData,
 } from "./v/1"
 
@@ -48,6 +48,7 @@ export { HoppRESTAuthAPIKey } from "./v/4"
 export { HoppRESTRequestVariables } from "./v/2"
 
 export { HoppRESTReqBody } from "./v/6"
+export { HoppRESTHeaders } from "./v/7"
 
 const versionedObject = z.object({
   // v is a stringified number
@@ -55,7 +56,7 @@ const versionedObject = z.object({
 })
 
 export const HoppRESTRequest = createVersionedEntity({
-  latestVersion: 6,
+  latestVersion: 7,
   versionMap: {
     0: V0_VERSION,
     1: V1_VERSION,
@@ -64,6 +65,7 @@ export const HoppRESTRequest = createVersionedEntity({
     4: V4_VERSION,
     5: V5_VERSION,
     6: V6_VERSION,
+    7: V7_VERSION,
   },
   getVersion(data) {
     // For V1 onwards we have the v string storing the number
@@ -105,7 +107,7 @@ const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
   ),
 })
 
-export const RESTReqSchemaVersion = "6"
+export const RESTReqSchemaVersion = "7"
 
 export type HoppRESTParam = HoppRESTRequest["params"][number]
 export type HoppRESTHeader = HoppRESTRequest["headers"][number]

packages/hoppscotch-data/src/rest/v/7.ts

@@ -0,0 +1,59 @@
+import { defineVersion } from "verzod"
+import { z } from "zod"
+
+import { V6_SCHEMA } from "./6"
+
+export const HoppRESTParams = z.array(
+  z.object({
+    key: z.string().catch(""),
+    value: z.string().catch(""),
+    active: z.boolean().catch(true),
+    description: z.string().catch(""),
+  })
+)
+
+export type HoppRESTParams = z.infer<typeof HoppRESTParams>
+
+export const HoppRESTHeaders = z.array(
+  z.object({
+    key: z.string().catch(""),
+    value: z.string().catch(""),
+    active: z.boolean().catch(true),
+    description: z.string().catch(""),
+  })
+)
+
+export type HoppRESTHeaders = z.infer<typeof HoppRESTHeaders>
+
+export const V7_SCHEMA = V6_SCHEMA.extend({
+  v: z.literal("7"),
+  params: HoppRESTParams,
+  headers: HoppRESTHeaders,
+})
+
+export default defineVersion({
+  schema: V7_SCHEMA,
+  initial: false,
+  up(old: z.infer<typeof V6_SCHEMA>) {
+    const params = old.params.map((param) => {
+      return {
+        ...param,
+        description: "",
+      }
+    })
+
+    const headers = old.headers.map((header) => {
+      return {
+        ...header,
+        description: "",
+      }
+    })
+
+    return {
+      ...old,
+      v: "7" as const,
+      params,
+      headers,
+    }
+  },
+})