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>

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>