From 1572ff9e67d6cdc534e5a3ee04c8b993eb6fcc5d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 19 Nov 2021 08:52:58 +0530
Subject: [PATCH] fix: regression in bulk mode to key-value pair translation

---
 .../components/graphql/RequestOptions.vue       | 17 +++++++++--------
 .../hoppscotch-app/components/http/Headers.vue  | 17 +++++++++--------
 .../components/http/Parameters.vue              | 17 +++++++++--------
 .../helpers/editor/themes/baseTheme.ts          |  5 +++++
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 3d8447085..dd7443134 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -129,7 +129,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.clear_all')"
                 svg="trash-2"
-                @click.native="bulkMode ? clearBulkEditor() : clearContent()"
+                @click.native="clearContent()"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
@@ -335,7 +335,7 @@ watch(bulkHeaders, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setGQLHeaders(transformation)
+    setGQLHeaders(transformation as GQLHeader[])
   } catch (e) {
     $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
@@ -392,12 +392,13 @@ const showSaveRequestModal = ref(false)
 watch(
   headers,
   () => {
-    if (
-      (headers.value[headers.value.length - 1]?.key !== "" ||
-        headers.value[headers.value.length - 1]?.value !== "") &&
-      headers.value.length
-    )
-      addRequestHeader()
+    if (!bulkMode.value)
+      if (
+        (headers.value[headers.value.length - 1]?.key !== "" ||
+          headers.value[headers.value.length - 1]?.value !== "") &&
+        headers.value.length
+      )
+        addRequestHeader()
   },
   { deep: true }
 )
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 716a41200..5eb154bea 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -28,7 +28,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
-          @click.native="bulkMode ? clearBulkEditor() : clearContent()"
+          @click.native="clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -212,7 +212,7 @@ watch(bulkHeaders, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setRESTHeaders(transformation)
+    setRESTHeaders(transformation as HoppRESTHeader[])
   } catch (e) {
     $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
@@ -226,12 +226,13 @@ const headers$ = useReadonlyStream(restHeaders$, [])
 watch(
   headers$,
   (newValue) => {
-    if (
-      (newValue[newValue.length - 1]?.key !== "" ||
-        newValue[newValue.length - 1]?.value !== "") &&
-      newValue.length
-    )
-      addHeader()
+    if (!bulkMode.value)
+      if (
+        (newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== "") &&
+        newValue.length
+      )
+        addHeader()
   },
   { deep: true }
 )
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index 0826fc135..8490ccb15 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -28,7 +28,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
-          @click.native="bulkMode ? clearBulkEditor() : clearContent()"
+          @click.native="clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -194,7 +194,7 @@ watch(bulkParams, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setRESTParams(transformation)
+    setRESTParams(transformation as HoppRESTParam[])
   } catch (e) {
     $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
@@ -219,12 +219,13 @@ const params$ = useReadonlyStream(restParams$, [])
 watch(
   params$,
   (newValue) => {
-    if (
-      (newValue[newValue.length - 1]?.key !== "" ||
-        newValue[newValue.length - 1]?.value !== "") &&
-      newValue.length
-    )
-      addParam()
+    if (!bulkMode.value)
+      if (
+        (newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== "") &&
+        newValue.length
+      )
+        addParam()
   },
   { deep: true }
 )
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 9f7a2c40e..52a15e167 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -128,6 +128,11 @@ export const baseTheme = EditorView.theme({
   ".cm-scroller::-webkit-scrollbar": {
     display: "none",
   },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "var(--divider-light-color)",
+    color: "var(--secondary-dark-color)",
+    borderColor: "var(--divider-dark-color)",
+  },
 })
 
 const editorTypeColor = "var(--editor-type-color)"