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>
2024-08-27 15:00:12 +06:00
parent 33b0a54af1
commit 43730d66f6
29 changed files with 1366 additions and 1092 deletions
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/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']
--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/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>
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -61,91 +61,19 @@
      drag-class="cursor-grabbing"
    >
      <template #item="{ element: header, index }">
-        <div
-          class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
-        >
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{
-                theme: 'tooltip',
-                delay: [500, 20],
-                content:
-                  index !== workingHeaders?.length - 1
-                    ? t('action.drag_to_reorder')
-                    : null,
-              }"
-              :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>
+        <HttpKeyValue
+          v-model:name="header.key"
+          v-model:value="header.value"
+          v-model:description="header.description"
+          :total="workingHeaders.length"
+          :index="index"
+          :entity-id="header.id"
+          :entity-active="header.active"
+          :is-active="header.hasOwnProperty('active')"
+          :key-auto-complete-source="commonHeaders"
+          @update-entity="updateHeader($event.index, $event.payload)"
+          @delete-entity="deleteHeader($event)"
+        />
      </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 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 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 { useCodemirror } from "@composables/codemirror"
+import { useI18n } from "@composables/i18n"
+import { useColorMode } from "@composables/theming"
+import { useToast } from "@composables/toast"
 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)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
+    const newHeadersListKeyValuePairs = newHeadersList.map(
+      ({ 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)) {
-    request.value.headers = filteredBulkHeaders
+  const headers = toRef(request.value, "headers")
+
+  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) => ({
-      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
-      source: "headers",
-      id: `header-${index}`,
-      header: {
-        key: header.inheritedHeader?.key,
-        value: header.inheritedHeader?.value,
-        active: header.inheritedHeader?.active,
-      },
-    }))
+    .map((header, index) => {
+      const { key, value, active, description } = header.inheritedHeader
+
+      return {
+        inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+        source: "headers",
+        id: `header-${index}`,
+        header: {
+          key,
+          value,
+          active,
+          description,
+        },
+      }
+    })

  let auth = [] as {
    inheritedFrom: string
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -181,6 +181,7 @@ const contentTypeOverride = (tab: RESTOptionTabs) => {
      key: "Content-Type",
      value: "",
      active: true,
+      description: "",
    })
  }
 }
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -64,101 +64,24 @@
        drag-class="cursor-grabbing"
      >
        <template #item="{ element: header, index }">
-          <div
-            class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
-          >
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{
-                  theme: 'tooltip',
-                  delay: [500, 20],
-                  content:
-                    index !== workingHeaders?.length - 1
-                      ? t('action.drag_to_reorder')
-                      : null,
-                }"
-                :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"
-              :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>
+          <HttpKeyValue
+            v-model:name="header.key"
+            v-model:value="header.value"
+            v-model:description="header.description"
+            :total="workingHeaders.length"
+            :index="index"
+            :entity-id="header.id"
+            :entity-active="header.active"
+            :envs="envs"
+            :is-active="header.hasOwnProperty('active')"
+            :inspection-key-result="getInspectorResult(headerKeyResults, index)"
+            :inspection-value-result="
+              getInspectorResult(headerValueResults, index)
+            "
+            :key-auto-complete-source="commonHeaders"
+            @update-entity="updateHeader($event.index, $event.payload)"
+            @delete-entity="deleteHeader($event)"
+          />
        </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 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 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 { useCodemirror } from "@composables/codemirror"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
-import { computed, reactive, ref, watch } from "vue"
-import { isEqual, cloneDeep } from "lodash-es"
+import { useToast } from "@composables/toast"
 import {
  HoppRESTAuth,
  HoppRESTHeader,
@@ -314,38 +247,47 @@ import {
  rawKeyValueEntriesToString,
  RawKeyValueEntry,
 } from "@hoppscotch/data"
-import { flow, pipe } from "fp-ts/function"
-import * as RA from "fp-ts/ReadonlyArray"
-import * as E from "fp-ts/Either"
-import * as O from "fp-ts/Option"
+import { useVModel } from "@vueuse/core"
+import { useService } from "dioc/vue"
 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 { commonHeaders } from "~/helpers/headers"
-import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
-import { useToast } from "@composables/toast"
+
+import { useNestedSetting } from "~/composables/settings"
 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 { useService } from "dioc/vue"
+import { toggleNestedSetting } from "~/newstore/settings"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
-import { useNestedSetting } from "~/composables/settings"
-import { toggleNestedSetting } from "~/newstore/settings"
-import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+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"
+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)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
+    const newHeadersListKeyValuePairs = newHeadersList.map(
+      ({ 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)) {
-    request.value.headers = filteredBulkHeaders
+  const headers = toRef(request.value, "headers")
+
+  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) => ({
-      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
-      source: "headers",
-      id: `header-${index}`,
-      header: {
-        key: header.inheritedHeader?.key,
-        value: header.inheritedHeader?.value,
-        active: header.inheritedHeader?.active,
-      },
-    }))
+    .map((header, index) => {
+      const { key, value, active, description } = header.inheritedHeader
+
+      return {
+        inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+        source: "headers",
+        id: `header-${index}`,
+        header: {
+          key,
+          value,
+          active,
+          description,
+        },
+      }
+    })

  let auth = [] as {
    inheritedFrom: string
--- a/packages/hoppscotch-common/src/components/http/KeyValue.vue
+++ b/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>
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -59,102 +59,25 @@
        drag-class="cursor-grabbing"
      >
        <template #item="{ element: param, index }">
-          <div
-            class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
-          >
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{
-                  theme: 'tooltip',
-                  delay: [500, 20],
-                  content:
-                    index !== workingParams?.length - 1
-                      ? t('action.drag_to_reorder')
-                      : null,
-                }"
-                :icon="IconGripVertical"
-                class="opacity-0"
-                :class="{
-                  'draggable-handle cursor-grab group-hover:opacity-100':
-                    index !== workingParams?.length - 1,
-                }"
-                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>
+          <HttpKeyValue
+            v-model:name="param.key"
+            v-model:value="param.value"
+            v-model:description="param.description"
+            :total="workingParams.length"
+            :index="index"
+            :entity-id="param.id"
+            :entity-active="param.active"
+            :envs="envs"
+            :is-active="param.hasOwnProperty('active')"
+            :inspection-key-result="
+              getInspectorResult(parameterKeyResults, index)
+            "
+            :inspection-value-result="
+              getInspectorResult(parameterValueResults, index)
+            "
+            @update-entity="updateParam($event.index, $event.payload)"
+            @delete-entity="deleteParam($event)"
+          />
        </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)) {
-      bulkParams.value = rawKeyValueEntriesToString(newParamsList)
+    const newParamsListKeyValuePairs = newParamsList.map(
+      ({ 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)) {
-    params.value = filteredBulkParams
+  const paramKeyValuePairs = params.value.map(({ key, value, active }) => ({
+    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: "",
    },
  ]

--- a/packages/hoppscotch-common/src/helpers/curl/tests/curlparser.spec.js
+++ b/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: "",
--- a/packages/hoppscotch-common/src/helpers/curl/curlparser.ts
+++ b/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()

--- a/packages/hoppscotch-common/src/helpers/curl/sub_helpers/headers.ts
+++ b/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) =>
--- a/packages/hoppscotch-common/src/helpers/curl/sub_helpers/queries.ts
+++ b/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)
        ),
--- a/packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts
+++ b/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 = (
--- a/packages/hoppscotch-common/src/helpers/import-export/import/openapi.ts
+++ b/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(
-          (header) =>
-            <HoppRESTParam>{
-              key: header.name,
-              value: "", // TODO: Can we do anything more ? (parse default values maybe)
-              active: true,
-            }
-        )
+        O.map((header) => {
+          return <HoppRESTParam>{
+            key: header.name,
+            value: "", // TODO: Can we do anything more ? (parse default values maybe)
+            active: true,
+            description: header.description ?? "",
+          }
+        })
      )
    )
  )
--- a/packages/hoppscotch-common/src/helpers/import-export/import/postman.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/postman.ts
@@ -1,34 +1,35 @@
 import {
-  Collection as PMCollection,
-  Item,
-  ItemGroup,
-  QueryParam,
-  RequestAuthDefinition,
-  VariableDefinition,
-  Variable,
-} from "postman-collection"
-import {
+  FormDataKeyValue,
+  HoppCollection,
  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 { PMRawLanguage } from "~/types/pm-coll-exts"
+import {
+  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,
      }
    })
  )
--- a/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
+++ b/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: "",
      },
    },
  ]
--- a/packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts
+++ b/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) {
--- a/packages/hoppscotch-common/src/services/persistence/tests/mocks/index.ts
+++ b/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: [],