feat: bulk edit for graphql headers

components/graphql/RequestOptions.vue

@@ -27,6 +27,13 @@
                 class="rounded-none !text-accent"
                 @click.native="runQuery()"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
@@ -86,6 +93,13 @@
               {{ $t("request.variables") }}
             </label>
             <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
@@ -129,20 +143,56 @@
               {{ $t("tab.headers") }}
             </label>
             <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.clear_all')"
                 svg="trash-2"
+                :disabled="bulkMode"
                 @click.native="headers = []"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('state.bulk_mode')"
+                svg="edit"
+                :class="{ '!text-accent': bulkMode }"
+                @click.native="bulkMode = !bulkMode"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('add.new')"
                 svg="plus"
+                :disabled="bulkMode"
                 @click.native="addRequestHeader"
               />
             </div>
           </div>
+          <div v-if="bulkMode" class="flex">
+            <textarea
+              v-model="bulkHeaders"
+              v-focus
+              name="bulk-parameters"
+              class="
+                bg-transparent
+                border-b border-dividerLight
+                flex flex-1
+                py-2
+                px-4
+                whitespace-pre
+                resize-y
+                overflow-auto
+              "
+              rows="10"
+              :placeholder="$t('state.bulk_mode_placeholder')"
+            ></textarea>
+          </div>
+          <div v-else>
             <div
               v-for="(header, index) in headers"
               :key="`header-${index}`"
@@ -246,6 +296,7 @@
                 @click.native="addRequestHeader"
               />
             </div>
+          </div>
         </AppSection>
       </SmartTab>
     </SmartTabs>
@@ -311,6 +362,25 @@ export default defineComponent({
     const t = i18n.t.bind(i18n)
     const nuxt = useNuxt()
 
+    const bulkMode = ref(false)
+    const bulkHeaders = ref("")
+
+    watch(bulkHeaders, () => {
+      try {
+        const transformation = bulkHeaders.value.split("\n").map((item) => ({
+          key: item.substr(0, item.indexOf(":")).trim(),
+          value: item.substr(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setGQLHeaders(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
     const url = useReadonlyStream(gqlURL$, "")
     const gqlQueryString = useStream(gqlQuery$, "", setGQLQuery)
     const variableString = useStream(gqlVariables$, "", setGQLVariables)
@@ -475,6 +545,8 @@ export default defineComponent({
 
       commonHeaders,
       updateGQLHeader,
+      bulkMode,
+      bulkHeaders,
     }
   },
 })