chore: code refactors

2024-03-06 21:24:27 +05:30
parent 1e906bbec3
commit e9f1dc7ba1
8 changed files with 110 additions and 118 deletions
--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/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) => ({
-    key: v.key,
-    value: v.value,
+  return tab.value.document.request.requestVariables.map(({ key, value }) => ({
+    key,
+    value,
    secret: false,
    sourceEnv: "RequestVariable",
  }))
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/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 = {
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/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
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/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 e = request.value.params.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+const newActiveParamsCount = computed(() => {
+  const count = request.value.params.filter(
+    (x) => x.active && (x.key || x.value)
  ).length

-  if (e === 0) return null
-  return `${e}`
+  return count ? count : null
 })

-const newActiveHeadersCount$ = computed(() => {
-  const e = request.value.headers.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+const newActiveHeadersCount = computed(() => {
+  const count = request.value.headers.filter(
+    (x) => x.active && (x.key || x.value)
  ).length

-  if (e === 0) return null
-  return `${e}`
+  return count ? count : null
 })

-const newActiveRequestVariablesCount$ = computed(() => {
-  const e = request.value.requestVariables.filter(
-    (x) => x.active && (x.key !== "" || x.value !== "")
+const newActiveRequestVariablesCount = computed(() => {
+  const count = request.value.requestVariables.filter(
+    (x) => x.active && (x.key || x.value)
  ).length
-
-  if (e === 0) return null
-  return `${e}`
+  return count ? count : null
 })

 defineActionHandler("request.open-tab", ({ tab }) => {
--- a/packages/hoppscotch-common/src/components/http/RequestVariables.vue
+++ b/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,25 +62,23 @@
          <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
-                      ? t('action.drag_to_reorder')
-                      : null,
-                }"
-                :icon="IconGripVertical"
-                class="opacity-0"
-                :class="{
-                  'draggable-handle cursor-grab group-hover:opacity-100':
-                    index !== workingRequestVaraiables?.length - 1,
-                }"
-                tabindex="-1"
-              />
-            </span>
+            <HoppButtonSecondary
+              v-tippy="{
+                theme: 'tooltip',
+                delay: [500, 20],
+                content:
+                  index !== workingRequestVariables?.length - 1
+                    ? t('action.drag_to_reorder')
+                    : null,
+              }"
+              :icon="IconGripVertical"
+              class="opacity-0"
+              :class="{
+                'draggable-handle cursor-grab group-hover:opacity-100':
+                  index !== workingRequestVariables?.length - 1,
+              }"
+              tabindex="-1"
+            />
            <SmartEnvInput
              v-model="variable.key"
              :placeholder="`${t('count.variable', { count: index + 1 })}`"
@@ -105,50 +103,46 @@
                })
              "
            />
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  variable.hasOwnProperty('active')
-                    ? variable.active
-                      ? t('action.turn_off')
-                      : t('action.turn_on')
-                    : t('action.turn_off')
-                "
-                :icon="
-                  variable.hasOwnProperty('active')
-                    ? variable.active
-                      ? IconCheckCircle
-                      : IconCircle
-                    : IconCheckCircle
-                "
-                color="green"
-                @click="
-                  updateVariable(index, {
-                    id: variable.id,
-                    key: variable.key,
-                    value: variable.value,
-                    active: variable.hasOwnProperty('active')
-                      ? !variable.active
-                      : false,
-                  })
-                "
-              />
-            </span>
-            <span>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.remove')"
-                :icon="IconTrash"
-                color="red"
-                @click="deleteVariable(index)"
-              />
-            </span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                variable.hasOwnProperty('active')
+                  ? variable.active
+                    ? t('action.turn_off')
+                    : t('action.turn_on')
+                  : t('action.turn_off')
+              "
+              :icon="
+                variable.hasOwnProperty('active')
+                  ? variable.active
+                    ? IconCheckCircle
+                    : IconCircle
+                  : IconCheckCircle
+              "
+              color="green"
+              @click="
+                updateVariable(index, {
+                  id: variable.id,
+                  key: variable.key,
+                  value: variable.value,
+                  active: variable.hasOwnProperty('active')
+                    ? !variable.active
+                    : false,
+                })
+              "
+            />
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('action.remove')"
+              :icon="IconTrash"
+              color="red"
+              @click="deleteVariable(index)"
+            />
          </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(
-    workingRequestVaraiables.value,
+  workingRequestVariables.value = pipe(
+    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: "",
--- a/packages/hoppscotch-common/src/composables/codemirror.ts
+++ b/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,
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/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) => ({
-            key: variable.key,
-            value: variable.value,
+          ...reqVariables.requestVariables.map(({ key, value }) => ({
+            key,
+            value,
            sourceEnv: "RequestVariable",
            secret: false,
          })),
@@ -257,12 +257,14 @@ export class HoppEnvironmentPlugin {

    subscribeToStream(aggregateEnvsWithSecrets$, (envs) => {
      this.envs = [
-        ...currentTab.document.request.requestVariables.map((variable) => ({
-          key: variable.key,
-          value: variable.value,
-          sourceEnv: "RequestVariable",
-          secret: false,
-        })),
+        ...currentTab.document.request.requestVariables.map(
+          ({ key, value }) => ({
+            key,
+            value,
+            sourceEnv: "RequestVariable",
+            secret: false,
+          })
+        ),
        ...envs,
      ]

--- a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
+++ b/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"
-                                ? currentSelectedEnvironment.name
-                                : "Global",
+                              env.sourceEnv === "Global"
+                                ? "Global"
+                                : currentSelectedEnvironment.name,
                            variableName: formattedExEnv,
                            isSecret: env.secret,
                          })