feat: persist bulk mode line wrap setting for request variables

- Show line wrap toggle only if entries are present under http request headers & URL encoded params body.
- Organize imports.

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

@@ -26,7 +26,7 @@
           @click="clearContent()"
         />
         <HoppButtonSecondary
-          v-if="bulkMode"
+          v-if="bulkHeaders"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': WRAP_LINES }"

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

@@ -24,9 +24,11 @@
           v-if="bulkVariables"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="
+            toggleNestedSetting('WRAP_LINES', 'httpRequestVariables')
+          "
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -191,6 +193,8 @@ import { objRemoveKey } from "~/helpers/functional/object"
 import { parseRawKeyValueEntriesE } from "@hoppscotch/data"
 import { RawKeyValueEntry } from "@hoppscotch/data"
 import { rawKeyValueEntriesToString } from "@hoppscotch/data"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const colorMode = useColorMode()
 
@@ -200,7 +204,8 @@ const toast = useToast()
 const bulkMode = ref(false)
 const bulkEditor = ref<any | null>(null)
 const bulkVariables = ref("")
-const linewrapEnabled = ref(true)
+
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpRequestVariables")
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
@@ -222,7 +227,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/x-yaml",
       placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter,
     completer: null,

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

@@ -21,7 +21,7 @@
           @click="clearContent()"
         />
         <HoppButtonSecondary
-          v-if="bulkMode"
+          v-if="bulkUrlEncodedParams"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': WRAP_LINES }"

packages/hoppscotch-common/src/newstore/settings.ts

@@ -38,6 +38,7 @@ export type SettingsDef = {
     httpUrlEncoded: boolean
     httpPreRequest: boolean
     httpTest: boolean
+    httpRequestVariables: boolean
     graphqlQuery: boolean
     graphqlResponseBody: boolean
     graphqlHeaders: boolean
@@ -79,6 +80,7 @@ export const getDefaultSettings = (): SettingsDef => ({
     httpUrlEncoded: true,
     httpPreRequest: true,
     httpTest: true,
+    httpRequestVariables: true,
     graphqlQuery: true,
     graphqlResponseBody: true,
     graphqlHeaders: false,

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -48,21 +48,22 @@ const SettingsDefSchema = z.object({
 
   WRAP_LINES: z.optional(
     z.object({
-      httpRequestBody: z.boolean(),
-      httpResponseBody: z.boolean(),
-      httpHeaders: z.boolean(),
-      httpParams: z.boolean(),
-      httpUrlEncoded: z.boolean(),
-      httpPreRequest: z.boolean(),
-      httpTest: z.boolean(),
-      graphqlQuery: z.boolean(),
-      graphqlResponseBody: z.boolean(),
-      graphqlHeaders: z.boolean(),
-      graphqlVariables: z.boolean(),
-      graphqlSchema: z.boolean(),
-      importCurl: z.boolean(),
-      codeGen: z.boolean(),
-      cookie: z.boolean(),
+      httpRequestBody: z.boolean().catch(true),
+      httpResponseBody: z.boolean().catch(true),
+      httpHeaders: z.boolean().catch(true),
+      httpParams: z.boolean().catch(true),
+      httpUrlEncoded: z.boolean().catch(true),
+      httpPreRequest: z.boolean().catch(true),
+      httpTest: z.boolean().catch(true),
+      httpRequestVariables: z.boolean().catch(true),
+      graphqlQuery: z.boolean().catch(true),
+      graphqlResponseBody: z.boolean().catch(true),
+      graphqlHeaders: z.boolean().catch(false),
+      graphqlVariables: z.boolean().catch(false),
+      graphqlSchema: z.boolean().catch(true),
+      importCurl: z.boolean().catch(true),
+      codeGen: z.boolean().catch(true),
+      cookie: z.boolean().catch(true),
     })
   ),
 })