feat: add request variable

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

@@ -67,6 +67,14 @@
     >
       <HttpTests v-model="request.testScript" />
     </HoppSmartTab>
+    <HoppSmartTab
+      v-if="properties ? properties.includes('requestVariables') : true"
+      :id="'requestVariables'"
+      :label="`${t('tab.variables')}`"
+      :info="`${newActiveRequestVariablesCount$}`"
+    >
+      <HttpRequestVariables v-model="request.requestVariables" />
+    </HoppSmartTab>
   </HoppSmartTabs>
 </template>
 
@@ -85,6 +93,7 @@ const VALID_OPTION_TABS = [
   "authorization",
   "preRequestScript",
   "tests",
+  "requestVariables",
 ] as const
 
 export type RESTOptionTabs = (typeof VALID_OPTION_TABS)[number]
@@ -134,6 +143,15 @@ const newActiveHeadersCount$ = computed(() => {
   return `${e}`
 })
 
+const newActiveRequestVariablesCount$ = computed(() => {
+  const e = request.value.requestVariables.filter(
+    (x) => x.active && (x.key !== "" || x.value !== "")
+  ).length
+
+  if (e === 0) return null
+  return `${e}`
+})
+
 defineActionHandler("request.open-tab", ({ tab }) => {
   selectedOptionTab.value = tab as RESTOptionTabs
 })