feat: input toggle for parameters and headers (#1388)

* feat: toggler for parameters and headers

* refactor: move bodyParams to separate component + feat: input toggle

* fix: backward copaitability

* Fixed issue with imported active prop mutations

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/http-body-parameters.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <div class="row-wrapper">
+          <label for="reqParamList">{{ $t("parameter_list") }}</label>
+          <div>
+            <button
+              class="icon"
+              @click="clearContent('bodyParams', $event)"
+              v-tooltip.bottom="$t('clear')"
+            >
+              <i class="material-icons">clear_all</i>
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <ul
+      v-for="(param, index) in bodyParams"
+      :key="index"
+      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      :class="{ 'border-t': index == 0 }"
+    >
+      <li>
+        <input
+          :placeholder="`key ${index + 1}`"
+          :name="`bparam ${index}`"
+          :value="param.key"
+          @change="
+            $store.commit('setKeyBodyParams', {
+              index,
+              value: $event.target.value,
+            })
+          "
+          @keyup.prevent="setRouteQueryState"
+          autofocus
+        />
+      </li>
+      <li>
+        <input
+          :placeholder="`value ${index + 1}`"
+          :value="param.value"
+          @change="
+            $store.commit('setValueBodyParams', {
+              index,
+              value: $event.target.value,
+            })
+          "
+          @keyup.prevent="setRouteQueryState"
+        />
+      </li>
+      <div>
+        <li>
+          <button
+            class="icon"
+            @click="
+              $store.commit('setActiveBodyParams', {
+                index,
+                value: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
+            v-tooltip.bottom="{
+              content: param.hasOwnProperty('active')
+                ? param.active
+                  ? $t('turn_off')
+                  : $t('turn_on')
+                : $t('turn_off'),
+            }"
+          >
+            <i class="material-icons">
+              {{
+                param.hasOwnProperty("active")
+                  ? param.active
+                    ? "check_box"
+                    : "check_box_outline_blank"
+                  : "check_box"
+              }}
+            </i>
+          </button>
+        </li>
+      </div>
+      <div>
+        <li>
+          <button
+            class="icon"
+            @click="removeRequestBodyParam(index)"
+            v-tooltip.bottom="$t('delete')"
+          >
+            <i class="material-icons">delete</i>
+          </button>
+        </li>
+      </div>
+    </ul>
+    <ul>
+      <li>
+        <button class="icon" @click="addRequestBodyParam" name="addrequest">
+          <i class="material-icons">add</i>
+          <span>{{ $t("add_new") }}</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bodyParams: { type: Array, default: () => [] },
+  },
+  methods: {
+    clearContent(bodyParams, $event) {
+      this.$emit("clear-content", bodyParams, $event)
+    },
+    setRouteQueryState() {
+      this.$emit("set-route-query-state")
+    },
+    removeRequestBodyParam(index) {
+      this.$emit("remove-request-body-param", index)
+    },
+    addRequestBodyParam() {
+      this.$emit("add-request-body-param")
+    },
+  },
+}
+</script>

components/http/http-headers.vue

@@ -56,10 +56,35 @@
         <li>
           <button
             class="icon"
-            @click="removeRequestHeader(index)"
-            v-tooltip.bottom="$t('delete')"
-            id="header"
+            @click="
+              $store.commit('setActiveHeader', {
+                index,
+                value: header.hasOwnProperty('active') ? !header.active : false,
+              })
+            "
+            v-tooltip.bottom="{
+              content: header.hasOwnProperty('active')
+                ? header.active
+                  ? $t('turn_off')
+                  : $t('turn_on')
+                : $t('turn_off'),
+            }"
           >
+            <i class="material-icons">
+              {{
+                header.hasOwnProperty("active")
+                  ? header.active
+                    ? "check_box"
+                    : "check_box_outline_blank"
+                  : "check_box"
+              }}
+            </i>
+          </button>
+        </li>
+      </div>
+      <div>
+        <li>
+          <button class="icon" @click="removeRequestHeader(index)" v-tooltip.bottom="$t('delete')">
             <i class="material-icons">delete</i>
           </button>
         </li>

components/http/http-parameters.vue

@@ -73,10 +73,35 @@
         <li>
           <button
             class="icon"
-            @click="removeRequestParam(index)"
-            v-tooltip.bottom="$t('delete')"
-            id="param"
+            @click="
+              $store.commit('setActiveParams', {
+                index,
+                value: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
+            v-tooltip.bottom="{
+              content: param.hasOwnProperty('active')
+                ? param.active
+                  ? $t('turn_off')
+                  : $t('turn_on')
+                : $t('turn_off'),
+            }"
           >
+            <i class="material-icons">
+              {{
+                param.hasOwnProperty("active")
+                  ? param.active
+                    ? "check_box"
+                    : "check_box_outline_blank"
+                  : "check_box"
+              }}
+            </i>
+          </button>
+        </li>
+      </div>
+      <div>
+        <li>
+          <button class="icon" @click="removeRequestParam(index)" v-tooltip.bottom="$t('delete')">
             <i class="material-icons">delete</i>
           </button>
         </li>

helpers/requestParams.js

@@ -1,9 +1,12 @@
 export function hasPathParams(params) {
-  return params.some(({ type }) => type === "path")
+  return params
+    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+    .some(({ type }) => type === "path")
 }
 
 export function addPathParamsToVariables(params, variables) {
   params
+    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
     .filter(({ key }) => !!key)
     .filter(({ type }) => type === "path")
     .forEach(({ key, value }) => (variables[key] = value))
@@ -11,5 +14,8 @@ export function addPathParamsToVariables(params, variables) {
 }
 
 export function getQueryParams(params) {
-  return params.filter(({ key }) => !!key).filter(({ type }) => type != "path")
+  return params
+    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+    .filter(({ key }) => !!key)
+    .filter(({ type }) => type != "path")
 }

lang/en-US.json

@@ -264,6 +264,7 @@
   "syncCollections": "Collections",
   "syncEnvironments": "Environments",
   "turn_on": "Turn on",
+  "turn_off": "Turn off",
   "login_first": "Login first",
   "paste_a_note": "Paste a note",
   "import_from_sync": "Import from Sync",

pages/index.vue

@@ -151,81 +151,14 @@
                 </div>
               </li>
             </ul>
-            <div v-if="!rawInput">
-              <ul>
-                <li>
-                  <div class="row-wrapper">
-                    <label for="reqParamList">{{ $t("parameter_list") }}</label>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="clearContent('bodyParams', $event)"
-                        v-tooltip.bottom="$t('clear')"
-                      >
-                        <i class="material-icons">clear_all</i>
-                      </button>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-              <ul
-                v-for="(param, index) in bodyParams"
-                :key="index"
-                class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
-                :class="{ 'border-t': index == 0 }"
-              >
-                <li>
-                  <input
-                    :placeholder="`key ${index + 1}`"
-                    :name="`bparam ${index}`"
-                    :value="param.key"
-                    @change="
-                      $store.commit('setKeyBodyParams', {
-                        index,
-                        value: $event.target.value,
-                      })
-                    "
-                    @keyup.prevent="setRouteQueryState"
-                    autofocus
-                  />
-                </li>
-                <li>
-                  <input
-                    :placeholder="`value ${index + 1}`"
-                    :id="`bvalue ${index}`"
-                    :name="'bvalue' + index"
-                    :value="param.value"
-                    @change="
-                      $store.commit('setValueBodyParams', {
-                        index,
-                        value: $event.target.value,
-                      })
-                    "
-                    @keyup.prevent="setRouteQueryState"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <button
-                      class="icon"
-                      @click="removeRequestBodyParam(index)"
-                      v-tooltip.bottom="$t('delete')"
-                      id="delParam"
-                    >
-                      <i class="material-icons">delete</i>
-                    </button>
-                  </li>
-                </div>
-              </ul>
-              <ul>
-                <li>
-                  <button class="icon" @click="addRequestBodyParam" name="addrequest">
-                    <i class="material-icons">add</i>
-                    <span>{{ $t("add_new") }}</span>
-                  </button>
-                </li>
-              </ul>
-            </div>
+            <http-body-parameters
+              v-if="!rawInput"
+              :bodyParams="bodyParams"
+              @clear-content="clearContent"
+              @set-route-query-state="setRouteQueryState"
+              @remove-request-body-param="removeRequestBodyParam"
+              @add-request-body-param="addRequestBodyParam"
+            />
             <div v-else>
               <ul>
                 <li>
@@ -261,7 +194,6 @@
             <span>
               <button
                 class="icon"
-                id="show-modal"
                 @click="showCurlImportModal = !showCurlImportModal"
                 v-tooltip.bottom="$t('import_curl')"
               >
@@ -269,7 +201,6 @@
               </button>
               <button
                 class="icon"
-                id="code"
                 @click="showCodegenModal = !showCodegenModal"
                 :disabled="!isValidURL"
                 v-tooltip.bottom="$t('show_code')"
@@ -281,7 +212,6 @@
               <button
                 class="icon"
                 @click="copyRequest"
-                id="copyRequest"
                 ref="copyRequest"
                 :disabled="!isValidURL"
                 v-tooltip.bottom="$t('copy_request_link')"
@@ -292,7 +222,6 @@
               <button
                 class="icon"
                 @click="saveRequest"
-                id="saveRequest"
                 ref="saveRequest"
                 :disabled="!isValidURL"
                 v-tooltip.bottom="$t('save_to_collections')"
@@ -383,12 +312,7 @@
                   </li>
                   <div>
                     <li>
-                      <button
-                        class="icon"
-                        id="switchVisibility"
-                        ref="switchVisibility"
-                        @click="switchVisibility"
-                      >
+                      <button class="icon" ref="switchVisibility" @click="switchVisibility">
                         <i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
                         <i class="material-icons" v-if="passwordFieldType !== 'text'"
                           >visibility_off</i
@@ -1267,12 +1191,9 @@ export default {
         try {
           const obj = JSON.parse(
             `{${bodyParams
+              .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
               .filter(({ key }) => !!key)
-              .map(
-                ({ key, value }) => `
-              "${key}": "${value}"
-              `
-              )
+              .map(({ key, value }) => `"${key}": "${value}"`)
               .join()}}`
           )
           return JSON.stringify(obj, null, 2)
@@ -1289,33 +1210,26 @@ export default {
         }
       } else {
         return bodyParams
+          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
           .filter(({ key }) => !!key)
           .map(({ key, value }) => `${key}=${encodeURIComponent(value)}`)
           .join("&")
       }
     },
-    headerString() {
-      const result = this.headers
-        .filter(({ key }) => !!key)
-        .map(({ key, value }) => `${key}: ${value}`)
-        .join(",\n")
-      return result === "" ? "" : `${result}`
-    },
     queryString() {
       const result = getQueryParams(this.params)
         .map(({ key, value }) => `${key}=${encodeURIComponent(value)}`)
         .join("&")
       return result === "" ? "" : `?${result}`
     },
-    responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
-    },
     requestCode() {
       let headers = []
       if (this.preRequestScript || hasPathParams(this.params)) {
         let environmentVariables = getEnvironmentVariablesFromScript(this.preRequestScript)
         environmentVariables = addPathParamsToVariables(this.params, environmentVariables)
-        for (let k of this.headers) {
+        for (let k of this.headers.filter((item) =>
+          item.hasOwnProperty("active") ? item.active == true : true
+        )) {
           const kParsed = parseTemplateString(k.key, environmentVariables)
           const valParsed = parseTemplateString(k.value, environmentVariables)
           headers.push({ key: kParsed, value: valParsed })
@@ -1489,7 +1403,12 @@ export default {
       headers = Object.assign(
         // Clone the app headers object first, we don't want to
         // mutate it with the request headers added by default.
-        Object.assign({}, this.headers)
+        Object.assign(
+          {},
+          this.headers.filter((item) =>
+            item.hasOwnProperty("active") ? item.active == true : true
+          )
+        )
         // We make our temporary headers object the source so
         // that you can override the added headers if you
         // specify them.
@@ -1673,6 +1592,7 @@ export default {
       return Object.keys(queryParsed).map((key) => ({
         key,
         value: queryParsed[key],
+        active: true,
       }))
     },
     pathInputHandler() {
@@ -1687,6 +1607,7 @@ export default {
       this.$store.commit("addHeaders", {
         key: "",
         value: "",
+        active: true,
       })
       return false
     },
@@ -1706,7 +1627,7 @@ export default {
       })
     },
     addRequestParam() {
-      this.$store.commit("addParams", { key: "", value: "", type: "query" })
+      this.$store.commit("addParams", { key: "", value: "", type: "query", active: true })
       return false
     },
     removeRequestParam(index) {
@@ -1725,7 +1646,7 @@ export default {
       })
     },
     addRequestBodyParam() {
-      this.$store.commit("addBodyParams", { key: "", value: "" })
+      this.$store.commit("addBodyParams", { key: "", value: "", active: true })
       return false
     },
     removeRequestBodyParam(index) {

store/mutations.js

@@ -1,3 +1,5 @@
+import Vue from "vue";
+
 export default {
   setState({ request }, { attribute, value }) {
     request[attribute] = value
@@ -45,6 +47,14 @@ export default {
     request.headers[index].value = value
   },
 
+  setActiveHeader({ request }, { index, value }) {
+    if (!request.headers[index].hasOwnProperty("active")) {
+      Vue.set(request.headers[index], "active", value)
+    } else {
+      request.headers[index].active = value
+    }
+  },
+
   addParams({ request }, value) {
     request.params.push(value)
   },
@@ -65,6 +75,14 @@ export default {
     request.params[index].type = value
   },
 
+  setActiveParams({ request }, { index, value }) {
+    if (!request.params[index].hasOwnProperty("active")) {
+      Vue.set(request.params[index], "active", value)
+    } else {
+      request.params[index].active = value
+    }
+  },
+
   addBodyParams({ request }, value) {
     request.bodyParams.push(value)
   },
@@ -81,6 +99,14 @@ export default {
     request.bodyParams[index].value = value
   },
 
+  setActiveBodyParams({ request }, { index, value }) {
+    if (!request.bodyParams[index].hasOwnProperty("active")) {
+      Vue.set(request.bodyParams[index], "active", value)
+    } else {
+      request.bodyParams[index].active = value
+    }
+  },
+
   setOAuth2({ oauth2 }, { attribute, value }) {
     oauth2[attribute] = value
   },