From bb6d9a88ec1daf175248f43eb0ab8933e2c20dc9 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 14 Aug 2021 23:46:03 +0530
Subject: [PATCH] refactor: minoe fixes and improvements

---
 assets/scss/styles.scss                        | 18 +-----------------
 components/collections/graphql/index.vue       |  1 -
 components/environments/index.vue              |  1 -
 components/graphql/RequestOptions.vue          |  2 ++
 components/graphql/Response.vue                |  1 +
 components/graphql/Sidebar.vue                 |  1 +
 components/http/CodegenModal.vue               |  2 +-
 components/http/RawBody.vue                    |  1 +
 .../lenses/renderers/HTMLLensRenderer.vue      | 15 ++++++++++++++-
 .../lenses/renderers/ImageLensRenderer.vue     | 13 ++++++++++---
 .../lenses/renderers/JSONLensRenderer.vue      |  9 +++++++--
 .../lenses/renderers/RawLensRenderer.vue       | 10 ++++++++--
 .../lenses/renderers/XMLLensRenderer.vue       |  9 +++++++--
 components/smart/AutoComplete.vue              |  1 +
 components/smart/DeletableChip.vue             |  2 +-
 components/smart/Item.vue                      |  4 ++--
 layouts/default.vue                            |  2 +-
 newstore/RESTSession.ts                        | 10 ++++++++--
 pages/documentation.vue                        |  1 +
 pages/index.vue                                |  2 +-
 20 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 684926bc8..5a6fbd400 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -152,6 +152,7 @@ a {
 [interactive] > div {
   @apply flex;
   @apply flex-1;
+  @apply h-full;
 }
 
 .tippy-content > div {
@@ -338,23 +339,6 @@ input[type="checkbox"] {
   @apply text-secondaryLight;
 }
 
-#response-details-wrapper {
-  @apply relative;
-
-  textarea {
-    @apply m-0;
-    @apply w-full;
-  }
-
-  .covers-response {
-    @apply absolute;
-    @apply inset-0;
-    @apply bg-white;
-    @apply h-full;
-    @apply w-full;
-  }
-}
-
 .toasted-container {
   .toasted {
     &.toasted-primary {
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 3ed312ee5..41120c887 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -73,7 +73,6 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 476476f24..62a0ff7fd 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -80,7 +80,6 @@
       v-if="environments.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">library_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.environments") }}
       </span>
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index f0bfdd078..f1f3c55aa 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -62,6 +62,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
             @update-query="updateQuery"
           />
         </AppSection>
@@ -105,6 +106,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
         </AppSection>
       </SmartTab>
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index 62c46d1f6..ff9afa03b 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -47,6 +47,7 @@
         showPrintMargin: false,
         useWorker: false,
       }"
+      styles="border-b border-dividerLight"
     />
     <div
       v-else
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 013949be3..10f7601be 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -196,6 +196,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
           <div
             v-else
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 05eb4bd72..7485d682b 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -57,7 +57,7 @@
             showPrintMargin: false,
             useWorker: false,
           }"
-          styles="rounded"
+          styles="border rounded border-dividerLight"
         />
       </div>
     </template>
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 567bcfd35..5aec1c59e 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -66,6 +66,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 872556ecd..fe7d1cdb8 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -42,7 +42,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'html'"
@@ -54,6 +54,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
       <iframe
         ref="previewFrame"
@@ -135,3 +136,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.covers-response {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-primary;
+  @apply h-full;
+  @apply w-full;
+  @apply border;
+  @apply border-dividerLight;
+}
+</style>
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index ea127a9ad..6318f8474 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -27,8 +27,11 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
-      <img class="max-w-full" :src="imageSource" />
+    <div class="flex relative">
+      <img
+        class="border-b border-dividerLight flex max-w-full flex-1"
+        :src="imageSource"
+      />
     </div>
   </div>
 </template>
@@ -46,7 +49,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 15b389225..f377ee058 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
@@ -48,6 +48,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -78,7 +79,11 @@ export default {
       }
     },
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 77132e76e..9021c439b 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'plain_text'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,13 +70,18 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
   },
   methods: {
     downloadResponse() {
+      console.log(this.responseType)
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
       const a = document.createElement("a")
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 9b2d87500..1284aa6ce 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'xml'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,7 +70,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 9dd830e76..fdc27bdcc 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -186,6 +186,7 @@ export default {
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
+  @apply relative;
   @apply contents;
 
   input:focus + ul.suggestions,
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index b629bfc94..453ba7124 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <i class="opacity-75 material-icons">attachment</i>
-    <span class="px-2"><slot></slot></span>
+    <span class="max-w-64 px-2 truncate"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
       icon="close"
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 9786baa40..fc3e47201 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -57,10 +57,10 @@
     </span>
     <SmartSpinner v-else class="mr-4" />
     <div
-      class="flex-1 inline-flex items-start"
+      class="flex-1 inline-flex truncate items-start"
       :class="{ 'flex-col': description }"
     >
-      <div>
+      <div class="truncate">
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">
diff --git a/layouts/default.vue b/layouts/default.vue
index 5c2ccbd11..c573533bd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -19,7 +19,7 @@
                 <AppHeader />
               </Pane>
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-                <main class="flex flex-1">
+                <main class="flex flex-1 w-full">
                   <nuxt class="flex flex-1" />
                 </main>
               </Pane>
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 4980ed9eb..797f70a8b 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -587,7 +587,10 @@ export const restParams$ = restSessionStore.subject$.pipe(
 )
 
 export const restActiveParamsCount$ = restParams$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )
 
 export const restMethod$ = restSessionStore.subject$.pipe(
@@ -601,7 +604,10 @@ export const restHeaders$ = restSessionStore.subject$.pipe(
 )
 
 export const restActiveHeadersCount$ = restHeaders$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )
 
 export const restAuth$ = restRequest$.pipe(pluck("auth"))
diff --git a/pages/documentation.vue b/pages/documentation.vue
index db414bd47..17fbb48a7 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -72,6 +72,7 @@
             <div
               class="
                 bg-primary
+                border-t border-b border-dividerLight
                 flex
                 p-4
                 bottom-0
diff --git a/pages/index.vue b/pages/index.vue
index 65ab4fa34..9f44dd8c8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,7 +14,7 @@
               <HttpParameters />
             </SmartTab>
 
-            <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
+            <SmartTab :id="'bodyParams'" :label="$t('body')">
               <HttpBody />
             </SmartTab>