Merge branch 'main' into feat/codemirror

assets/scss/styles.scss

@@ -35,12 +35,14 @@
   @apply text-accentContrast;
 }
 
-input::placeholder {
+input::placeholder,
+textarea::placeholder {
   @apply text-secondaryDark;
   @apply opacity-25;
 }
 
-input {
+input,
+textarea {
   @apply text-secondaryDark;
   @apply font-medium;
 }
@@ -194,7 +196,7 @@ hr {
 .input,
 .select,
 .textarea {
-  @apply flex flex-1;
+  @apply flex;
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-transparent;

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,122 +143,161 @@
               {{ $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
+          <div v-if="bulkMode" class="flex">
-            v-for="(header, index) in headers"
+            <textarea-autosize
-            :key="`header-${index}`"
+              v-model="bulkHeaders"
-            class="
+              v-focus
-              divide-x divide-dividerLight
+              name="bulk-parameters"
-              border-b border-dividerLight
+              class="
-              flex
-            "
-          >
-            <SmartAutoComplete
-              :placeholder="$t('count.header', { count: index + 1 })"
-              :source="commonHeaders"
-              :spellcheck="false"
-              :value="header.key"
-              autofocus
-              styles="
                 bg-transparent
+                border-b border-dividerLight
                 flex
+                font-mono
                 flex-1
-                py-1
+                py-2
                 px-4
-                truncate
+                whitespace-pre
-                focus:outline-none
+                resize-y
-              "
+                overflow-auto
-              @input="
-                updateGQLHeader(index, {
-                  key: $event,
-                  value: header.value,
-                  active: header.active,
-                })
               "
+              rows="10"
+              :placeholder="$t('state.bulk_mode_placeholder')"
             />
-            <input
+          </div>
-              class="bg-transparent flex flex-1 py-2 px-4"
+          <div v-else>
-              :placeholder="$t('count.value', { count: index + 1 })"
+            <div
-              :name="`value ${index}`"
+              v-for="(header, index) in headers"
-              :value="header.value"
+              :key="`header-${index}`"
-              autofocus
+              class="
-              @change="
+                divide-x divide-dividerLight
-                updateGQLHeader(index, {
+                border-b border-dividerLight
-                  key: header.key,
+                flex
-                  value: $event.target.value,
-                  active: header.active,
-                })
               "
-            />
+            >
-            <span>
+              <SmartAutoComplete
-              <ButtonSecondary
+                :placeholder="$t('count.header', { count: index + 1 })"
-                v-tippy="{ theme: 'tooltip' }"
+                :source="commonHeaders"
-                :title="
+                :spellcheck="false"
-                  header.hasOwnProperty('active')
+                :value="header.key"
-                    ? header.active
+                autofocus
-                      ? $t('action.turn_off')
+                styles="
-                      : $t('action.turn_on')
+                  bg-transparent
-                    : $t('action.turn_off')
+                  flex
+                  flex-1
+                  py-1
+                  px-4
+                  truncate
+                  focus:outline-none
                 "
-                :svg="
+                @input="
-                  header.hasOwnProperty('active')
-                    ? header.active
-                      ? 'check-circle'
-                      : 'circle'
-                    : 'check-circle'
-                "
-                color="green"
-                @click.native="
                   updateGQLHeader(index, {
-                    key: header.key,
+                    key: $event,
                     value: header.value,
-                    active: !header.active,
+                    active: header.active,
                   })
                 "
               />
-            </span>
+              <input
-            <span>
+                class="bg-transparent flex flex-1 py-2 px-4"
-              <ButtonSecondary
+                :placeholder="$t('count.value', { count: index + 1 })"
-                v-tippy="{ theme: 'tooltip' }"
+                :name="`value ${index}`"
-                :title="$t('action.remove')"
+                :value="header.value"
-                svg="trash"
+                autofocus
-                color="red"
+                @change="
-                @click.native="removeRequestHeader(index)"
+                  updateGQLHeader(index, {
+                    key: header.key,
+                    value: $event.target.value,
+                    active: header.active,
+                  })
+                "
               />
-            </span>
+              <span>
-          </div>
+                <ButtonSecondary
-          <div
+                  v-tippy="{ theme: 'tooltip' }"
-            v-if="headers.length === 0"
+                  :title="
-            class="
+                    header.hasOwnProperty('active')
-              flex flex-col
+                      ? header.active
-              text-secondaryLight
+                        ? $t('action.turn_off')
-              p-4
+                        : $t('action.turn_on')
-              items-center
+                      : $t('action.turn_off')
-              justify-center
+                  "
-            "
+                  :svg="
-          >
+                    header.hasOwnProperty('active')
-            <span class="text-center pb-4">
+                      ? header.active
-              {{ $t("empty.headers") }}
+                        ? 'check-circle'
-            </span>
+                        : 'circle'
-            <ButtonSecondary
+                      : 'check-circle'
-              :label="$t('add.new')"
+                  "
-              filled
+                  color="green"
-              svg="plus"
+                  @click.native="
-              @click.native="addRequestHeader"
+                    updateGQLHeader(index, {
-            />
+                      key: header.key,
+                      value: header.value,
+                      active: !header.active,
+                    })
+                  "
+                />
+              </span>
+              <span>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('action.remove')"
+                  svg="trash"
+                  color="red"
+                  @click.native="removeRequestHeader(index)"
+                />
+              </span>
+            </div>
+            <div
+              v-if="headers.length === 0"
+              class="
+                flex flex-col
+                text-secondaryLight
+                p-4
+                items-center
+                justify-center
+              "
+            >
+              <span class="text-center pb-4">
+                {{ $t("empty.headers") }}
+              </span>
+              <ButtonSecondary
+                :label="$t('add.new')"
+                filled
+                svg="plus"
+                @click.native="addRequestHeader"
+              />
+            </div>
           </div>
         </AppSection>
       </SmartTab>
@@ -311,6 +364,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.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(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 +547,8 @@ export default defineComponent({
 
       commonHeaders,
       updateGQLHeader,
+      bulkMode,
+      bulkHeaders,
     }
   },
 })

components/http/Headers.vue

@@ -28,139 +28,185 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
+          :disabled="bulkMode"
           @click.native="clearContent"
         />
+        <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="addHeader"
         />
       </div>
     </div>
-    <div
+    <div v-if="bulkMode" class="flex">
-      v-for="(header, index) in headers$"
+      <textarea-autosize
-      :key="`header-${index}`"
+        v-model="bulkHeaders"
-      class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        v-focus
-    >
+        name="bulk-headers"
-      <SmartAutoComplete
+        class="
-        :placeholder="$t('count.header', { count: index + 1 })"
-        :source="commonHeaders"
-        :spellcheck="false"
-        :value="header.key"
-        autofocus
-        styles="
           bg-transparent
+          border-b border-dividerLight
           flex
+          font-mono
           flex-1
-          py-1
+          py-2
           px-4
-          truncate
+          whitespace-pre
-        "
+          resize-y
-        :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
+          overflow-auto
-        @input="
-          updateHeader(index, {
-            key: $event,
-            value: header.value,
-            active: header.active,
-          })
         "
+        rows="10"
+        :placeholder="$t('state.bulk_mode_placeholder')"
       />
-      <SmartEnvInput
+    </div>
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+    <div v-else>
-        v-model="header.value"
+      <div
-        :placeholder="$t('count.value', { count: index + 1 })"
+        v-for="(header, index) in headers$"
-        styles="
+        :key="`header-${index}`"
-          bg-transparent
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
-          flex
+      >
-          flex-1
+        <SmartAutoComplete
-          py-1
+          :placeholder="$t('count.header', { count: index + 1 })"
-          px-4
+          :source="commonHeaders"
-        "
+          :spellcheck="false"
-        @change="
+          :value="header.key"
-          updateHeader(index, {
+          autofocus
-            key: header.key,
+          styles="
-            value: $event,
+            bg-transparent
-            active: header.active,
+            flex
-          })
+            flex-1
-        "
+            py-1
-      />
+            px-4
-      <input
+            truncate
-        v-else
-        class="bg-transparent flex flex-1 py-2 px-4"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        :name="'value' + index"
-        :value="header.value"
-        @change="
-          updateHeader(index, {
-            key: header.key,
-            value: $event.target.value,
-            active: header.active,
-          })
-        "
-      />
-      <span>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
           "
-          :svg="
+          :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
-            header.hasOwnProperty('active')
+          @input="
-              ? header.active
-                ? 'check-circle'
-                : 'circle'
-              : 'check-circle'
-          "
-          color="green"
-          @click.native="
             updateHeader(index, {
-              key: header.key,
+              key: $event,
               value: header.value,
-              active: header.hasOwnProperty('active') ? !header.active : false,
+              active: header.active,
             })
           "
         />
-      </span>
+        <SmartEnvInput
-      <span>
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-        <ButtonSecondary
+          v-model="header.value"
-          v-tippy="{ theme: 'tooltip' }"
+          :placeholder="$t('count.value', { count: index + 1 })"
-          :title="$t('action.remove')"
+          styles="
-          svg="trash"
+            bg-transparent
-          color="red"
+            flex
-          @click.native="deleteHeader(index)"
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateHeader(index, {
+              key: header.key,
+              value: $event,
+              active: header.active,
+            })
+          "
         />
-      </span>
+        <input
-    </div>
+          v-else
-    <div
+          class="bg-transparent flex flex-1 py-2 px-4"
-      v-if="headers$.length === 0"
+          :placeholder="$t('count.value', { count: index + 1 })"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          :name="'value' + index"
-    >
+          :value="header.value"
-      <span class="text-center pb-4">
+          @change="
-        {{ $t("empty.headers") }}
+            updateHeader(index, {
-      </span>
+              key: header.key,
-      <ButtonSecondary
+              value: $event.target.value,
-        filled
+              active: header.active,
-        :label="$t('add.new')"
+            })
-        svg="plus"
+          "
-        @click.native="addHeader"
+        />
-      />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? $t('action.turn_off')
+                  : $t('action.turn_on')
+                : $t('action.turn_off')
+            "
+            :svg="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateHeader(index, {
+                key: header.key,
+                value: header.value,
+                active: header.hasOwnProperty('active')
+                  ? !header.active
+                  : false,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteHeader(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="headers$.length === 0"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <span class="text-center pb-4">
+          {{ $t("empty.headers") }}
+        </span>
+        <ButtonSecondary
+          filled
+          :label="$t('add.new')"
+          svg="plus"
+          @click.native="addHeader"
+        />
+      </div>
     </div>
   </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  defineComponent,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
 import {
   restHeaders$,
   addRESTHeader,
   updateRESTHeader,
   deleteRESTHeader,
   deleteAllRESTHeaders,
+  setRESTHeaders,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
 import { useSetting } from "~/newstore/settings"
@@ -169,9 +215,36 @@ import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
 export default defineComponent({
   setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const bulkMode = ref(false)
+    const bulkHeaders = ref("")
+
+    watch(bulkHeaders, () => {
+      try {
+        const transformation = bulkHeaders.value.split("\n").map((item) => ({
+          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setRESTHeaders(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
     return {
       headers$: useReadonlyStream(restHeaders$, []),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
+      bulkHeaders,
     }
   },
   data() {

components/http/ImportCurl.vue

@@ -2,14 +2,14 @@
   <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <textarea
+        <textarea-autosize
           id="import-curl"
           v-model="curl"
-          class="textarea floating-input"
+          class="font-mono textarea floating-input"
           autofocus
           rows="8"
           placeholder=" "
-        ></textarea>
+        />
         <label for="import-curl">
           {{ $t("request.enter_curl") }}
         </label>

components/http/Parameters.vue

@@ -28,144 +28,187 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
+          :disabled="bulkMode"
           @click.native="clearContent"
         />
+        <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="addParam"
         />
       </div>
     </div>
-    <div
+    <div v-if="bulkMode" class="flex">
-      v-for="(param, index) in params$"
+      <textarea-autosize
-      :key="`param-${index}`"
+        v-model="bulkParams"
-      class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        v-focus
-    >
+        name="bulk-parameters"
-      <SmartEnvInput
+        class="
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-        v-model="param.key"
-        :placeholder="$t('count.parameter', { count: index + 1 })"
-        styles="
           bg-transparent
+          border-b border-dividerLight
           flex
+          font-mono font-medium
           flex-1
-          py-1
+          py-2
           px-4
+          whitespace-pre
+          resize-y
+          overflow-auto
         "
-        @change="
+        rows="10"
-          updateParam(index, {
+        :placeholder="$t('state.bulk_mode_placeholder')"
-            key: $event,
-            value: param.value,
-            active: param.active,
-          })
-        "
       />
-      <input
+    </div>
-        v-else
+    <div v-else>
-        class="bg-transparent flex flex-1 py-2 px-4"
+      <div
-        :placeholder="$t('count.parameter', { count: index + 1 })"
+        v-for="(param, index) in params$"
-        :name="'param' + index"
+        :key="`param-${index}`"
-        :value="param.key"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
-        autofocus
+      >
-        @change="
+        <SmartEnvInput
-          updateParam(index, {
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-            key: $event.target.value,
+          v-model="param.key"
-            value: param.value,
+          :placeholder="$t('count.parameter', { count: index + 1 })"
-            active: param.active,
+          styles="
-          })
+            bg-transparent
-        "
+            flex
-      />
+            flex-1
-      <SmartEnvInput
+            py-1
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            px-4
-        v-model="param.value"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        styles="
-          bg-transparent
-          flex
-          flex-1
-          py-1
-          px-4
-        "
-        @change="
-          updateParam(index, {
-            key: param.key,
-            value: $event,
-            active: param.active,
-          })
-        "
-      />
-      <input
-        v-else
-        class="bg-transparent flex flex-1 py-2 px-4"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        :name="'value' + index"
-        :value="param.value"
-        @change="
-          updateParam(index, {
-            key: param.key,
-            value: $event.target.value,
-            active: param.active,
-          })
-        "
-      />
-      <span>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
           "
-          :svg="
+          @change="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? 'check-circle'
-                : 'circle'
-              : 'check-circle'
-          "
-          color="green"
-          @click.native="
             updateParam(index, {
-              key: param.key,
+              key: $event,
               value: param.value,
-              active: param.hasOwnProperty('active') ? !param.active : false,
+              active: param.active,
             })
           "
         />
-      </span>
+        <input
-      <span>
+          v-else
-        <ButtonSecondary
+          class="bg-transparent flex flex-1 py-2 px-4"
-          v-tippy="{ theme: 'tooltip' }"
+          :placeholder="$t('count.parameter', { count: index + 1 })"
-          :title="$t('action.remove')"
+          :name="'param' + index"
-          svg="trash"
+          :value="param.key"
-          color="red"
+          autofocus
-          @click.native="deleteParam(index)"
+          @change="
+            updateParam(index, {
+              key: $event.target.value,
+              value: param.value,
+              active: param.active,
+            })
+          "
         />
-      </span>
+        <SmartEnvInput
-    </div>
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-    <div
+          v-model="param.value"
-      v-if="params$.length === 0"
+          :placeholder="$t('count.value', { count: index + 1 })"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          styles="
-    >
+            bg-transparent
-      <span class="text-center pb-4">
+            flex
-        {{ $t("empty.parameters") }}
+            flex-1
-      </span>
+            py-1
-      <ButtonSecondary
+            px-4
-        :label="$t('add.new')"
+          "
-        svg="plus"
+          @change="
-        filled
+            updateParam(index, {
-        @click.native="addParam"
+              key: param.key,
-      />
+              value: $event,
+              active: param.active,
+            })
+          "
+        />
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="param.value"
+          @change="
+            updateParam(index, {
+              key: param.key,
+              value: $event.target.value,
+              active: param.active,
+            })
+          "
+        />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? $t('action.turn_off')
+                  : $t('action.turn_on')
+                : $t('action.turn_off')
+            "
+            :svg="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateParam(index, {
+                key: param.key,
+                value: param.value,
+                active: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteParam(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="params$.length === 0"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <span class="text-center pb-4">
+          {{ $t("empty.parameters") }}
+        </span>
+        <ButtonSecondary
+          :label="$t('add.new')"
+          svg="plus"
+          filled
+          @click.native="addParam"
+        />
+      </div>
     </div>
   </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  defineComponent,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -174,14 +217,42 @@ import {
   updateRESTParam,
   deleteRESTParam,
   deleteAllRESTParams,
+  setRESTParams,
 } from "~/newstore/RESTSession"
 import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const bulkMode = ref(false)
+    const bulkParams = ref("")
+
+    watch(bulkParams, () => {
+      try {
+        const transformation = bulkParams.value.split("\n").map((item) => ({
+          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setRESTParams(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
     return {
       params$: useReadonlyStream(restParams$, []),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
+      bulkParams,
     }
   },
   watch: {

locales/en.json

@@ -403,6 +403,8 @@
     "url": "URL"
   },
   "state": {
+    "bulk_mode": "Bulk edit",
+    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :\nPrepend // to any row you want to add but keep disabled",
     "cleared": "Cleared",
     "connected": "Connected",
     "connected_to": "Connected to {name}",

nuxt.config.js

@@ -98,6 +98,7 @@ export default {
   plugins: [
     "~/plugins/v-tippy",
     "~/plugins/v-focus",
+    "~/plugins/v-textarea",
     "~/plugins/vue-apollo",
     "~/plugins/crisp",
     { src: "~/plugins/web-worker", ssr: false },
@@ -213,7 +214,7 @@ export default {
     families: {
       Inter: [400, 500, 600, 700, 800],
       "Material+Icons": true,
-      "Roboto+Mono": true,
+      "Roboto+Mono": [400, 500],
     },
   },
 

package-lock.json

@@ -40,6 +40,7 @@
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
         "vue-github-button": "^1.3.0",
+        "vue-textarea-autosize": "^1.1.1",
         "vue-tippy": "^4.10.2",
         "vuejs-auto-complete": "^0.9.0",
         "yargs-parser": "^20.2.9"
@@ -31585,9 +31586,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.1.8",
+      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dependencies": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -34172,6 +34173,21 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "node_modules/vue-textarea-autosize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-textarea-autosize/-/vue-textarea-autosize-1.1.1.tgz",
+      "integrity": "sha512-B33Mg5ZDEfj/whhoPBLg25qqAdGHGM2NjDT99Qi5MXRyeLmXb4C3s6EprAHqy3nU0cooWXFU+IekI5DpoEbnFg==",
+      "dependencies": {
+        "core-js": "^2.6.5"
+      }
+    },
+    "node_modules/vue-textarea-autosize/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/vue-tippy": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",
@@ -60426,9 +60442,9 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.8",
+      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -62392,6 +62408,21 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-textarea-autosize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-textarea-autosize/-/vue-textarea-autosize-1.1.1.tgz",
+      "integrity": "sha512-B33Mg5ZDEfj/whhoPBLg25qqAdGHGM2NjDT99Qi5MXRyeLmXb4C3s6EprAHqy3nU0cooWXFU+IekI5DpoEbnFg==",
+      "requires": {
+        "core-js": "^2.6.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        }
+      }
+    },
     "vue-tippy": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",

package.json

@@ -56,6 +56,7 @@
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",
     "vue-github-button": "^1.3.0",
+    "vue-textarea-autosize": "^1.1.1",
     "vue-tippy": "^4.10.2",
     "vuejs-auto-complete": "^0.9.0",
     "yargs-parser": "^20.2.9"

plugins/v-textarea.js

@@ -0,0 +1,4 @@
+import Vue from "vue"
+import VueTextareaAutosize from "vue-textarea-autosize"
+
+Vue.use(VueTextareaAutosize)