From 2e092d34a63eb32883bce67fb9149737bcef3dbb Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 10 Jul 2021 23:38:35 +0530
Subject: [PATCH] refactor: minor input stylings

---
 components/http/BodyParameters.vue         | 232 +++++++++++----------
 components/http/Headers.vue                | 194 ++++++++---------
 components/http/Parameters.vue             |  32 +--
 components/http/ResponseMeta.vue           |  48 ++---
 components/lenses/ResponseBodyRenderer.vue |   2 +-
 components/smart/AutoComplete.vue          |  14 +-
 pages/index.vue                            |  41 ++--
 7 files changed, 294 insertions(+), 269 deletions(-)

diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 131b6006b..a6a6930a7 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -1,132 +1,127 @@
 <template>
-  <div>
-    <ul>
-      <li>
-        <div class="flex flex-1">
-          <label for="reqParamList">{{ $t("request_body") }}</label>
-          <div>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
-              icon="clear_all"
-              @click.native="clearContent('bodyParams', $event)"
-            />
-          </div>
-        </div>
-      </li>
-    </ul>
-    <ul
+  <AppSection label="bodyParameters">
+    <div
+      v-if="bodyParams.length !== 0"
+      class="flex flex-1 items-center justify-between pl-4"
+    >
+      <label for="reqParamList" class="font-semibold text-xs">
+        {{ $t("request_body") }}
+      </label>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('clear')"
+        icon="clear_all"
+        @click.native="clearContent('bodyParams', $event)"
+      />
+    </div>
+    <div
       v-for="(param, index) in bodyParams"
       :key="index"
       class="
+        flex
         border-b border-dashed
-        divide-y
-        md:divide-x
+        divide-x
         border-divider
         divide-dashed divide-divider
-        md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
     >
-      <li>
-        <input
-          class="input"
-          :placeholder="`key ${index + 1}`"
-          :name="`bparam ${index}`"
-          :value="param.key"
-          autofocus
-          @change="updateBodyParams($event, index, `setKeyBodyParams`)"
-          @keyup.prevent="setRouteQueryState"
-        />
-      </li>
-      <li>
-        <input
-          v-if="!requestBodyParamIsFile(index)"
-          class="input"
-          :placeholder="`value ${index + 1}`"
-          :value="param.value"
-          @change="
-            // if input is form data, set value to be an array containing the value
-            // only
-            updateBodyParams($event, index, `setValueBodyParams`)
-          "
-          @keyup.prevent="setRouteQueryState"
-        />
-        <div v-else class="file-chips-container">
-          <div class="file-chips-wrapper">
-            <SmartDeletableChip
-              v-for="(file, i) in Array.from(bodyParams[index].value)"
-              :key="`body-param-${index}-file-${i}`"
-              @chip-delete="chipDelete(index, i)"
-            >
-              {{ file.name }}
-            </SmartDeletableChip>
-          </div>
+      <input
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-semibold
+          bg-primaryLight
+          focus:outline-none
+        "
+        :placeholder="$t('parameter_count', { count: index + 1 })"
+        :name="'param' + index"
+        :value="param.key"
+        autofocus
+        @change="updateBodyParams($event, index, `setKeyBodyParams`)"
+        @keyup.prevent="setRouteQueryState"
+      />
+      <input
+        v-if="!requestBodyParamIsFile(index)"
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-semibold
+          bg-primaryLight
+          focus:outline-none
+        "
+        :placeholder="$t('value_count', { count: index + 1 })"
+        :name="'value' + index"
+        :value="param.value"
+        @change="
+          // if input is form data, set value to be an array containing the value
+          // only
+          updateBodyParams($event, index, `setValueBodyParams`)
+        "
+        @keyup.prevent="setRouteQueryState"
+      />
+      <div v-else class="file-chips-container">
+        <div class="file-chips-wrapper">
+          <SmartDeletableChip
+            v-for="(file, i) in Array.from(bodyParams[index].value)"
+            :key="`body-param-${index}-file-${i}`"
+            @chip-delete="chipDelete(index, i)"
+          >
+            {{ file.name }}
+          </SmartDeletableChip>
         </div>
-      </li>
+      </div>
       <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              param.hasOwnProperty('active')
-                ? param.active
-                  ? $t('turn_off')
-                  : $t('turn_on')
-                : $t('turn_off')
-            "
-            :icon="
-              param.hasOwnProperty('active')
-                ? param.active
-                  ? 'check_box'
-                  : 'check_box_outline_blank'
-                : 'check_box'
-            "
-            @click.native="toggleActive(index, param)"
-          />
-        </li>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('turn_off')
+                : $t('turn_on')
+              : $t('turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          @click.native="toggleActive(index, param)"
+        />
       </div>
       <div v-if="contentType === 'multipart/form-data'">
-        <li>
-          <label for="attachment" class="p-0">
-            <ButtonSecondary
-              class="w-full"
-              icon="attach_file"
-              @click.native="$refs.attachment[index].click()"
-            />
-          </label>
-          <input
-            ref="attachment"
-            class="input"
-            name="attachment"
-            type="file"
-            multiple
-            @change="setRequestAttachment($event, index)"
+        <label for="attachment" class="p-0">
+          <ButtonSecondary
+            class="w-full"
+            icon="attach_file"
+            @click.native="$refs.attachment[index].click()"
           />
-        </li>
+        </label>
+        <input
+          ref="attachment"
+          class="input"
+          name="attachment"
+          type="file"
+          multiple
+          @change="setRequestAttachment($event, index)"
+        />
       </div>
       <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('delete')"
-            icon="delete"
-            @click.native="removeRequestBodyParam(index)"
-          />
-        </li>
-      </div>
-    </ul>
-    <ul>
-      <li>
         <ButtonSecondary
-          name="addrequest"
-          icon="add"
-          :label="$t('add_new')"
-          @click.native="addRequestBodyParam"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          @click.native="removeRequestBodyParam(index)"
         />
-      </li>
-    </ul>
-  </div>
+      </div>
+    </div>
+  </AppSection>
 </template>
 
 <script>
@@ -139,6 +134,23 @@ export default {
       return this.$store.state.request.contentType
     },
   },
+  watch: {
+    bodyParams: {
+      handler(newValue) {
+        if (
+          newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== ""
+        )
+          this.addRequestBodyParam()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    if (!this.bodyParams?.length) {
+      this.addRequestBodyParam()
+    }
+  },
   methods: {
     clearContent(bodyParams, $event) {
       this.$emit("clear-content", bodyParams, $event)
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index e287ed6b4..c3cd4be0e 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -1,111 +1,100 @@
 <template>
   <AppSection label="headers">
-    <ul v-if="headers.length !== 0">
-      <li>
-        <div class="flex flex-1">
-          <label for="headerList">{{ $t("header_list") }}</label>
-          <div>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
-              icon="clear_all"
-              @click.native="clearContent('headers', $event)"
-            />
-          </div>
-        </div>
-      </li>
-    </ul>
-    <ul
+    <div
+      v-if="headers.length !== 0"
+      class="flex flex-1 items-center justify-between pl-4"
+    >
+      <label for="headerList" class="font-semibold text-xs">
+        {{ $t("header_list") }}
+      </label>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('clear')"
+        icon="clear_all"
+        @click.native="clearContent('headers', $event)"
+      />
+    </div>
+    <div
       v-for="(header, index) in headers"
       :key="`${header.value}_${index}`"
       class="
+        flex
         border-b border-dashed
-        divide-y
-        md:divide-x
+        divide-x
         border-divider
         divide-dashed divide-divider
-        md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
     >
-      <li>
-        <SmartAutoComplete
-          :placeholder="$t('header_count', { count: index + 1 })"
-          :source="commonHeaders"
-          :spellcheck="false"
-          :value="header.key"
-          autofocus
-          @input="
-            $store.commit('setKeyHeader', {
-              index,
-              value: $event,
-            })
-          "
-          @keyup.prevent="setRouteQueryState"
-        />
-      </li>
-      <li>
-        <input
-          class="input"
-          :placeholder="$t('value_count', { count: index + 1 })"
-          :name="'value' + index"
-          :value="header.value"
-          @change="
-            $store.commit('setValueHeader', {
-              index,
-              value: $event.target.value,
-            })
-          "
-          @keyup.prevent="setRouteQueryState"
-        />
-      </li>
+      <SmartAutoComplete
+        :placeholder="$t('header_count', { count: index + 1 })"
+        :source="commonHeaders"
+        :spellcheck="false"
+        :value="header.key"
+        autofocus
+        @input="
+          $store.commit('setKeyHeader', {
+            index,
+            value: $event,
+          })
+        "
+        @keyup.prevent="setRouteQueryState"
+      />
+      <input
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-semibold
+          bg-primaryLight
+          focus:outline-none
+        "
+        :placeholder="$t('value_count', { count: index + 1 })"
+        :name="'value' + index"
+        :value="header.value"
+        @change="
+          $store.commit('setValueHeader', {
+            index,
+            value: $event.target.value,
+          })
+        "
+        @keyup.prevent="setRouteQueryState"
+      />
       <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              header.hasOwnProperty('active')
-                ? header.active
-                  ? $t('turn_off')
-                  : $t('turn_on')
-                : $t('turn_off')
-            "
-            :icon="
-              param.hasOwnProperty('active')
-                ? param.active
-                  ? 'check_box'
-                  : 'check_box_outline_blank'
-                : 'check_box'
-            "
-            @click.native="
-              $store.commit('setActiveHeader', {
-                index,
-                value: header.hasOwnProperty('active') ? !header.active : false,
-              })
-            "
-          />
-        </li>
-      </div>
-      <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('delete')"
-            icon="delete"
-            @click.native="removeRequestHeader(index)"
-          />
-        </li>
-      </div>
-    </ul>
-    <ul>
-      <li>
         <ButtonSecondary
-          icon="add"
-          :label="$t('add_new')"
-          @click.native="addRequestHeader"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? $t('turn_off')
+                : $t('turn_on')
+              : $t('turn_off')
+          "
+          :icon="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          @click.native="
+            $store.commit('setActiveHeader', {
+              index,
+              value: header.hasOwnProperty('active') ? !header.active : false,
+            })
+          "
         />
-      </li>
-    </ul>
+      </div>
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          @click.native="removeRequestHeader(index)"
+        />
+      </div>
+    </div>
   </AppSection>
 </template>
 
@@ -121,6 +110,23 @@ export default {
       commonHeaders,
     }
   },
+  watch: {
+    headers: {
+      handler(newValue) {
+        if (
+          newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== ""
+        )
+          this.addRequestHeader()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    if (!this.params?.length) {
+      this.addRequestHeader()
+    }
+  },
   methods: {
     clearContent(headers, $event) {
       this.$emit("clear-content", headers, $event)
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index b5113b82b..5c7ecc5c0 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -9,7 +9,7 @@
       </label>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        :title="$t('clear')"
+        :title="$t('clear_all')"
         icon="clear_all"
         @click.native="clearContent('parameters', $event)"
       />
@@ -20,11 +20,9 @@
       class="
         flex
         border-b border-dashed
-        divide-y
-        md:divide-x
+        divide-x
         border-divider
         divide-dashed divide-divider
-        md:divide-y-0
       "
       :class="{ 'border-t': index == 0 }"
     >
@@ -80,7 +78,6 @@
               py-3
               mr-8
               focus:outline-none
-              border-b border-dividerLight
               font-medium
               bg-primaryLight
             "
@@ -135,14 +132,6 @@
         />
       </div>
     </div>
-    <div class="flex sticky bottom-0 bg-primary z-10 flex-1">
-      <ButtonSecondary
-        icon="add"
-        class="flex-1"
-        :label="$t('add_new')"
-        @click.native="addRequestParam"
-      />
-    </div>
   </AppSection>
 </template>
 
@@ -151,6 +140,23 @@ export default {
   props: {
     params: { type: Array, default: () => [] },
   },
+  watch: {
+    params: {
+      handler(newValue) {
+        if (
+          newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== ""
+        )
+          this.addRequestParam()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    if (!this.params?.length) {
+      this.addRequestParam()
+    }
+  },
   methods: {
     clearContent(parameters, $event) {
       this.$emit("clear-content", parameters, $event)
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index ad6bcc929..742d2771e 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -1,28 +1,28 @@
 <template>
-  <div class="flex flex-col">
-    <div class="flex items-center justify-between">
-      <label>{{ $t("response") }}</label>
-      <label v-if="active"
-        ><i class="animate-spin material-icons">refresh</i></label
-      >
-      <label v-else :class="statusCategory ? statusCategory.className : ''">
-        <i class="material-icons">fiber_manual_record</i>
-      </label>
-    </div>
-    <div class="flex flex-col lg:flex-row">
-      <label class="flex-1">
-        {{ $t("status") + `: \xA0 ` }}
-        <span :class="statusCategory ? statusCategory.className : ''">
-          {{ response.status || $t("waiting_send_req") }}
-        </span>
-      </label>
-      <label>
-        {{ $t("duration") + `: \xA0 ${response.duration} ms` }}
-      </label>
-      <label>
-        {{ $t("size") + `: \xA0 ${response.size} B` }}
-      </label>
-    </div>
+  <div
+    class="
+      flex
+      sticky
+      top-0
+      z-10
+      bg-primary
+      items-center
+      p-4
+      font-mono font-semibold
+      space-x-4
+    "
+    :class="statusCategory ? statusCategory.className : ''"
+  >
+    <i v-if="active" class="animate-spin material-icons">refresh</i>
+    <span v-else>
+      {{ response.status }}
+    </span>
+    <span v-if="response.duration" class="text-xs">
+      {{ `${response.duration} ms` }}
+    </span>
+    <span v-if="response.size" class="text-xs">
+      {{ `${response.size} B` }}
+    </span>
   </div>
 </template>
 
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 7bbe398a5..e303bc805 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="m-4">
+  <SmartTabs styles="sticky z-10 top-13">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.lensName"
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 0f9238c5f..5967622ed 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -3,7 +3,15 @@
     <input
       ref="acInput"
       v-model="text"
-      class="input"
+      class="
+        px-4
+        py-3
+        text-xs
+        flex flex-1
+        font-semibold
+        bg-primaryLight
+        focus:outline-none
+      "
       type="text"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
@@ -187,6 +195,8 @@ export default {
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
+  @apply flex;
+  @apply flex-1;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
@@ -209,7 +219,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
-      @apply text-sm;
+      @apply text-xs;
       @apply font-mono;
 
       &:last-child {
diff --git a/pages/index.vue b/pages/index.vue
index 0022ef8cf..7a3a226f7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,10 +2,10 @@
   <!-- eslint-disable -->
   <div>
     <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane class="overflow-auto">
+      <Pane class="overflow-auto hide-scrollbar">
         <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="overflow-auto">
-            <div class="sticky top-0 z-10 bg-primary flex px-4 pt-4 pb-2">
+          <Pane class="overflow-auto hide-scrollbar">
+            <div class="sticky top-0 z-10 bg-primary flex p-4">
               <div class="relative inline-flex">
                 <span class="select-wrapper">
                   <tippy
@@ -28,6 +28,7 @@
                           px-4
                           py-2
                           truncate
+                          text-secondaryDark
                           font-semibold
                           border border-divider
                           transition
@@ -59,6 +60,7 @@
                     w-full
                     font-mono font-semibold
                     truncate
+                    text-secondaryDark
                     px-4
                     py-2
                     border border-divider
@@ -90,7 +92,6 @@
                     font-mono
                     flex
                     items-center
-                    justify-center
                     truncate
                     font-semibold
                     bg-accent
@@ -110,7 +111,6 @@
                     font-mono
                     flex
                     items-center
-                    justify-center
                     truncate
                     font-semibold
                     bg-accent
@@ -248,7 +248,7 @@
                 </tippy>
               </div>
             </div>
-            <SmartTabs styles="sticky top-62px z-10">
+            <SmartTabs styles="sticky top-70px z-10">
               <SmartTab
                 :id="'params'"
                 :label="
@@ -325,7 +325,13 @@
                   <li>
                     <div class="flex flex-1">
                       <span>
-                        <SmartToggle :on="rawInput" />
+                        <SmartToggle
+                          v-if="canListParameters"
+                          :on="rawInput"
+                          @change="rawInput = !rawInput"
+                        >
+                          {{ $t("raw_input") }}
+                        </SmartToggle>
                       </span>
                     </div>
                   </li>
@@ -700,7 +706,7 @@
               </SmartTab>
             </SmartTabs>
           </Pane>
-          <Pane class="overflow-auto">
+          <Pane class="overflow-auto hide-scrollbar">
             <HttpResponse
               :response="response"
               :active="runningRequest"
@@ -966,22 +972,7 @@ export default {
       this.setRouteQueryState()
     },
     params: {
-      handler(newValue) {
-        if (!this.paramsWatchEnabled) {
-          this.paramsWatchEnabled = true
-          return
-        }
-        let path = this.path
-        let queryString = getQueryParams(newValue)
-          .map(({ key, value }) => `${key.trim()}=${value.trim()}`)
-          .join("&")
-        queryString = queryString === "" ? "" : `?${encodeURI(queryString)}`
-        if (path.includes("?")) {
-          path = path.slice(0, path.indexOf("?")) + queryString
-        } else {
-          path = path + queryString
-        }
-        this.path = path
+      handler() {
         this.setRouteQueryState()
       },
       deep: true,
@@ -2026,7 +2017,7 @@ export default {
           this.headers = []
           this.testReports = []
       }
-      target.innerHTML = this.doneButton
+      // target.innerHTML = this.doneButton
       this.$toast.info(this.$t("cleared"), {
         icon: "clear_all",
       })