chore: code refactors

packages/hoppscotch-common/src/components/embeds/index.vue

@@ -123,9 +123,9 @@ const sharedRequestURL = computed(() => {
 })
 
 const tabRequestVariables = computed(() => {
-  return tab.value.document.request.requestVariables.map((v) => ({
+  return tab.value.document.request.requestVariables.map(({ key, value }) => ({
-    key: v.key,
+    key,
-    value: v.value,
+    value,
     secret: false,
     sourceEnv: "RequestVariable",
   }))

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

@@ -196,7 +196,7 @@ const requestCode = computed(() => {
           value: requestVariable.value,
           secret: false,
         }
-      return []
+      return {}
     }
   )
   const env: Environment = {

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

@@ -18,7 +18,7 @@
         :auto-complete-env="true"
         :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
         :envs="envs"
-      ></SmartEnvInput>
+      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
       <SmartEnvInput

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

@@ -5,15 +5,15 @@
     render-inactive-tabs
   >
     <HoppSmartTab
-      v-if="properties ? properties.includes('params') : true"
+      v-if="properties?.includes('params') ?? true"
       :id="'params'"
       :label="`${t('tab.parameters')}`"
-      :info="`${newActiveParamsCount$}`"
+      :info="`${newActiveParamsCount}`"
     >
       <HttpParameters v-model="request.params" :envs="envs" />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('bodyParams') : true"
+      v-if="properties?.includes('bodyParams') ?? true"
       :id="'bodyParams'"
       :label="`${t('tab.body')}`"
     >
@@ -25,10 +25,10 @@
       />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('headers') : true"
+      v-if="properties?.includes('headers') ?? true"
       :id="'headers'"
       :label="`${t('tab.headers')}`"
-      :info="`${newActiveHeadersCount$}`"
+      :info="`${newActiveHeadersCount}`"
     >
       <HttpHeaders
         v-model="request"
@@ -38,7 +38,7 @@
       />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('authorization') : true"
+      v-if="properties?.includes('authorization') ?? true"
       :id="'authorization'"
       :label="`${t('tab.authorization')}`"
     >
@@ -49,7 +49,7 @@
       />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('preRequestScript') : true"
+      v-if="properties?.includes('preRequestScript') ?? true"
       :id="'preRequestScript'"
       :label="`${t('tab.pre_request_script')}`"
       :indicator="
@@ -61,7 +61,7 @@
       <HttpPreRequestScript v-model="request.preRequestScript" />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('tests') : true"
+      v-if="properties?.includes('tests') ?? true"
       :id="'tests'"
       :label="`${t('tab.tests')}`"
       :indicator="
@@ -71,10 +71,10 @@
       <HttpTests v-model="request.testScript" />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('requestVariables') : true"
+      v-if="properties?.includes('requestVariables') ?? true"
       :id="'requestVariables'"
       :label="`${t('tab.variables')}`"
-      :info="`${newActiveRequestVariablesCount$}`"
+      :info="`${newActiveRequestVariablesCount}`"
       :align-last="true"
     >
       <HttpRequestVariables v-model="request.requestVariables" />
@@ -131,31 +131,27 @@ const changeOptionTab = (e: RESTOptionTabs) => {
   selectedOptionTab.value = e
 }
 
-const newActiveParamsCount$ = computed(() => {
+const newActiveParamsCount = computed(() => {
-  const e = request.value.params.filter(
+  const count = request.value.params.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+    (x) => x.active && (x.key || x.value)
   ).length
 
-  if (e === 0) return null
+  return count ? count : null
-  return `${e}`
 })
 
-const newActiveHeadersCount$ = computed(() => {
+const newActiveHeadersCount = computed(() => {
-  const e = request.value.headers.filter(
+  const count = request.value.headers.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+    (x) => x.active && (x.key || x.value)
   ).length
 
-  if (e === 0) return null
+  return count ? count : null
-  return `${e}`
 })
 
-const newActiveRequestVariablesCount$ = computed(() => {
+const newActiveRequestVariablesCount = computed(() => {
-  const e = request.value.requestVariables.filter(
+  const count = request.value.requestVariables.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+    (x) => x.active && (x.key || x.value)
   ).length
-
+  return count ? count : null
-  if (e === 0) return null
-  return `${e}`
 })
 
 defineActionHandler("request.open-tab", ({ tab }) => {

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

@@ -49,7 +49,7 @@
     </div>
     <div v-else>
       <draggable
-        v-model="workingRequestVaraiables"
+        v-model="workingRequestVariables"
         item-key="id"
         animation="250"
         handle=".draggable-handle"
@@ -62,13 +62,12 @@
           <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 !== workingRequestVaraiables?.length - 1
+                  index !== workingRequestVariables?.length - 1
                     ? t('action.drag_to_reorder')
                     : null,
               }"
@@ -76,11 +75,10 @@
               class="opacity-0"
               :class="{
                 'draggable-handle cursor-grab group-hover:opacity-100':
-                    index !== workingRequestVaraiables?.length - 1,
+                  index !== workingRequestVariables?.length - 1,
               }"
               tabindex="-1"
             />
-            </span>
             <SmartEnvInput
               v-model="variable.key"
               :placeholder="`${t('count.variable', { count: index + 1 })}`"
@@ -105,7 +103,6 @@
                 })
               "
             />
-            <span>
             <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="
@@ -134,8 +131,6 @@
                 })
               "
             />
-            </span>
-            <span>
             <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.remove')"
@@ -143,12 +138,11 @@
               color="red"
               @click="deleteVariable(index)"
             />
-            </span>
           </div>
         </template>
       </draggable>
       <HoppSmartPlaceholder
-        v-if="workingRequestVaraiables.length === 0"
+        v-if="workingRequestVariables.length === 0"
         :src="`/images/states/${colorMode.value}/add_files.svg`"
         :alt="`${t('empty.request_variables')}`"
         :text="t('empty.request_variables')"
@@ -238,7 +232,7 @@ useCodemirror(
 
 const idTicker = ref(0)
 
-const workingRequestVaraiables = ref<
+const workingRequestVariables = ref<
   Array<HoppRESTRequestVariable & { id: number }>
 >([
   {
@@ -255,7 +249,7 @@ watch(
   (newRequestVariableList) => {
     // Sync should overwrite working params
     const filteredWorkingRequestVariables: HoppRESTRequestVariable[] = pipe(
-      workingRequestVaraiables.value,
+      workingRequestVariables.value,
       A.filterMap(
         flow(
           O.fromPredicate((e) => e.key !== ""),
@@ -276,7 +270,7 @@ watch(
     )
 
     if (!isEqual(newRequestVariableList, filteredWorkingRequestVariables)) {
-      workingRequestVaraiables.value = pipe(
+      workingRequestVariables.value = pipe(
         newRequestVariableList,
         A.map((x) => ({ id: idTicker.value++, ...x }))
       )
@@ -289,7 +283,7 @@ watch(
   { immediate: true }
 )
 
-watch(workingRequestVaraiables, (newWorkingRequestVariables) => {
+watch(workingRequestVariables, (newWorkingRequestVariables) => {
   const fixedRequestVariables = pipe(
     newWorkingRequestVariables,
     A.filterMap(
@@ -323,12 +317,12 @@ watch(bulkVariables, (newBulkParams) => {
 })
 
 // Rule: Working Request variable always have last element is always an empty param
-watch(workingRequestVaraiables, (variableList) => {
+watch(workingRequestVariables, (variableList) => {
   if (
     variableList.length > 0 &&
     variableList[variableList.length - 1].key !== ""
   ) {
-    workingRequestVaraiables.value.push({
+    workingRequestVariables.value.push({
       id: idTicker.value++,
       key: "",
       value: "",
@@ -338,7 +332,7 @@ watch(workingRequestVaraiables, (variableList) => {
 })
 
 const addVariable = () => {
-  workingRequestVaraiables.value.push({
+  workingRequestVariables.value.push({
     id: idTicker.value++,
     key: "",
     value: "",
@@ -347,14 +341,14 @@ const addVariable = () => {
 }
 
 const updateVariable = (index: number, variable: any & { id: number }) => {
-  workingRequestVaraiables.value = workingRequestVaraiables.value.map((h, i) =>
+  workingRequestVariables.value = workingRequestVariables.value.map((h, i) =>
     i === index ? variable : h
   )
 }
 
 const deleteVariable = (index: number) => {
   const requestVariablesBeforeDeletion = cloneDeep(
-    workingRequestVaraiables.value
+    workingRequestVariables.value
   )
 
   if (
@@ -373,7 +367,7 @@ const deleteVariable = (index: number) => {
         {
           text: `${t("action.undo")}`,
           onClick: (_, toastObject) => {
-            workingRequestVaraiables.value = requestVariablesBeforeDeletion
+            workingRequestVariables.value = requestVariablesBeforeDeletion
             toastObject.goAway(0)
             deletionToast.value = null
           },
@@ -386,8 +380,8 @@ const deleteVariable = (index: number) => {
     })
   }
 
-  workingRequestVaraiables.value = pipe(
+  workingRequestVariables.value = pipe(
-    workingRequestVaraiables.value,
+    workingRequestVariables.value,
     A.deleteAt(index),
     O.getOrElseW(() =>
       throwError("Working Request Variable Deletion Out of Bounds")
@@ -397,7 +391,7 @@ const deleteVariable = (index: number) => {
 
 const clearContent = () => {
   // set params list to the initial state
-  workingRequestVaraiables.value = [
+  workingRequestVariables.value = [
     {
       id: idTicker.value++,
       key: "",

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -243,7 +243,7 @@ export function useCodemirror(
       if (from === to) return
       const text = view.value?.state.doc.sliceString(from, to)
       const { top, left } = view.value?.coordsAtPos(from)
-      if (text && text.trim()) {
+      if (text?.trim()) {
         invokeAction("contextmenu.open", {
           position: {
             top,

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -138,7 +138,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
               "requestVariables"
           } else {
             invokeAction(invokeActionType, {
-              envName: tooltipEnv?.sourceEnv !== "Global" ? envName : "Global",
+              envName: tooltipEnv?.sourceEnv === "Global" ? "Global" : envName,
               variableName: parsedEnvKey,
               isSecret: tooltipEnv?.secret,
             })
@@ -236,9 +236,9 @@ export class HoppEnvironmentPlugin {
       currentTab.document.request,
       (reqVariables) => {
         this.envs = [
-          ...reqVariables.requestVariables.map((variable) => ({
+          ...reqVariables.requestVariables.map(({ key, value }) => ({
-            key: variable.key,
+            key,
-            value: variable.value,
+            value,
             sourceEnv: "RequestVariable",
             secret: false,
           })),
@@ -257,12 +257,14 @@ export class HoppEnvironmentPlugin {
 
     subscribeToStream(aggregateEnvsWithSecrets$, (envs) => {
       this.envs = [
-        ...currentTab.document.request.requestVariables.map((variable) => ({
+        ...currentTab.document.request.requestVariables.map(
-          key: variable.key,
+          ({ key, value }) => ({
-          value: variable.value,
+            key,
+            value,
             sourceEnv: "RequestVariable",
             secret: false,
-        })),
+          })
+        ),
         ...envs,
       ]
 

packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts

@@ -225,9 +225,9 @@ export class EnvironmentInspectorService extends Service implements Inspector {
                         } else {
                           invokeAction(invokeActionType, {
                             envName:
-                              env.sourceEnv !== "Global"
+                              env.sourceEnv === "Global"
-                                ? currentSelectedEnvironment.name
+                                ? "Global"
-                                : "Global",
+                                : currentSelectedEnvironment.name,
                             variableName: formattedExEnv,
                             isSecret: env.secret,
                           })