From a4032836c37714e1df56b68f2df2c127203b8462 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 13 Jul 2021 11:07:29 +0530
Subject: [PATCH] feat: init new response state system

---
 assets/scss/themes.scss               |   4 +-
 components/http/Headers.vue           | 113 +++++----
 components/http/Parameters.vue        |   2 -
 components/http/Request.vue           | 314 ++++++++++++++++++++++++++
 components/http/Response.vue          |  24 +-
 components/http/ResponseMeta.vue      |  21 +-
 components/lenses/HeadersRenderer.vue |  12 +-
 components/smart/AutoComplete.vue     |   1 +
 components/smart/Item.vue             |   3 +-
 components/smart/Tab.vue              |   1 +
 components/smart/Tabs.vue             |  22 ++
 helpers/lenses/lenses.js              |   9 +-
 helpers/{network.js => network.ts}    |  39 +++-
 helpers/types/HoppRESTResponse.ts     |  22 ++
 helpers/utils/EffectiveURL.ts         |   2 +-
 newstore/RESTSession.ts               |  67 +++++-
 newstore/environments.ts              |  21 +-
 package-lock.json                     |  14 +-
 package.json                          |   2 +-
 pages/index.vue                       | 314 ++------------------------
 20 files changed, 620 insertions(+), 387 deletions(-)
 create mode 100644 components/http/Request.vue
 rename helpers/{network.js => network.ts} (53%)
 create mode 100644 helpers/types/HoppRESTResponse.ts

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 4ac55eab9..0641ba84a 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -28,7 +28,7 @@
   // Tooltip color
   --tooltip-color: theme("colors.dark.700");
   // Editor theme
-  --editor-theme: "twilight";
+  --editor-theme: "merbivore_soft";
 }
 
 @mixin lightTheme {
@@ -55,7 +55,7 @@
   // Tooltip color
   --tooltip-color: theme("colors.gray.50");
   // Editor theme
-  --editor-theme: "iplastic";
+  --editor-theme: "textmate";
 }
 
 @mixin blackTheme {
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index c3cd4be0e..0906f23ce 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -1,22 +1,27 @@
 <template>
   <AppSection label="headers">
-    <div
-      v-if="headers.length !== 0"
-      class="flex flex-1 items-center justify-between pl-4"
-    >
+    <div 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>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('add_new')"
+          icon="add"
+          @click.native="addHeader"
+        />
+      </div>
     </div>
     <div
-      v-for="(header, index) in headers"
-      :key="`${header.value}_${index}`"
+      v-for="(header, index) in headers$"
+      :key="index"
       class="
         flex
         border-b border-dashed
@@ -32,13 +37,13 @@
         :spellcheck="false"
         :value="header.key"
         autofocus
-        @input="
-          $store.commit('setKeyHeader', {
-            index,
-            value: $event,
+        @change="
+          updateHeader(index, {
+            key: $event.target.value,
+            value: header.value,
+            active: header.active,
           })
         "
-        @keyup.prevent="setRouteQueryState"
       />
       <input
         class="
@@ -54,12 +59,12 @@
         :name="'value' + index"
         :value="header.value"
         @change="
-          $store.commit('setValueHeader', {
-            index,
+          updateHeader(index, {
+            key: header.key,
             value: $event.target.value,
+            active: header.active,
           })
         "
-        @keyup.prevent="setRouteQueryState"
       />
       <div>
         <ButtonSecondary
@@ -79,9 +84,10 @@
               : 'check_box'
           "
           @click.native="
-            $store.commit('setActiveHeader', {
-              index,
-              value: header.hasOwnProperty('active') ? !header.active : false,
+            updateHeader(index, {
+              key: header.key,
+              value: header.value,
+              active: header.hasOwnProperty('active') ? !header.active : false,
             })
           "
         />
@@ -91,7 +97,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
-          @click.native="removeRequestHeader(index)"
+          @click.native="deleteHeader(index)"
         />
       </div>
     </div>
@@ -99,46 +105,57 @@
 </template>
 
 <script>
+import {
+  restHeaders$,
+  addRESTHeader,
+  updateRESTHeader,
+  deleteRESTHeader,
+  deleteAllRESTHeaders,
+} from "~/newstore/RESTSession"
+
 import { commonHeaders } from "~/helpers/headers"
 
 export default {
-  props: {
-    headers: { type: Array, default: () => [] },
-  },
   data() {
     return {
       commonHeaders,
     }
   },
-  watch: {
-    headers: {
-      handler(newValue) {
-        if (
-          newValue[newValue.length - 1]?.key !== "" ||
-          newValue[newValue.length - 1]?.value !== ""
-        )
-          this.addRequestHeader()
-      },
-      deep: true,
-    },
+  subscriptions() {
+    return {
+      headers$: restHeaders$,
+    }
   },
+  // 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()
+    if (!this.headers$?.length) {
+      this.addHeader()
     }
   },
   methods: {
-    clearContent(headers, $event) {
-      this.$emit("clear-content", headers, $event)
+    addHeader() {
+      addRESTHeader({ key: "", value: "", active: true })
     },
-    setRouteQueryState() {
-      this.$emit("set-route-query-state")
+    updateHeader(index, item) {
+      console.log(index, item)
+      updateRESTHeader(index, item)
     },
-    removeRequestHeader(index) {
-      this.$emit("remove-request-header", index)
+    deleteHeader(index) {
+      deleteRESTHeader(index)
     },
-    addRequestHeader() {
-      this.$emit("add-request-header")
+    clearContent() {
+      deleteAllRESTHeaders()
     },
   },
 }
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 725ea8de6..6179da61a 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -154,11 +154,9 @@ export default {
       addRESTParam({ key: "", value: "", active: true })
     },
     updateParam(index, item) {
-      console.log(index, item)
       updateRESTParam(index, item)
     },
     deleteParam(index) {
-      console.log(index)
       deleteRESTParam(index)
     },
     clearContent() {
diff --git a/components/http/Request.vue b/components/http/Request.vue
new file mode 100644
index 000000000..baf730574
--- /dev/null
+++ b/components/http/Request.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="sticky top-0 z-10 bg-primary flex p-4">
+    <div class="relative inline-flex">
+      <span class="select-wrapper">
+        <tippy
+          ref="options"
+          interactive
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <input
+              id="method"
+              class="
+                flex
+                rounded-l-lg
+                bg-primaryLight
+                font-mono
+                w-32
+                px-4
+                py-2
+                truncate
+                text-secondaryDark
+                font-semibold
+                border border-divider
+                transition
+                focus:outline-none focus:border-accent
+                cursor-pointer
+              "
+              :value="newMethod$"
+              autofocus
+            />
+          </template>
+          <SmartItem
+            v-for="(methodMenuItem, index) in methodMenuItems"
+            :key="`method-${index}`"
+            :label="methodMenuItem"
+            class="font-mono"
+            @click.native="
+              updateMethod(methodMenuItem)
+              $refs.options.tippy().hide()
+            "
+          />
+        </tippy>
+      </span>
+    </div>
+    <div class="flex-1 inline-flex">
+      <input
+        id="url"
+        v-model="newEndpoint$"
+        class="
+          w-full
+          font-mono font-semibold
+          truncate
+          text-secondaryDark
+          px-4
+          py-2
+          border border-divider
+          bg-primaryLight
+          transition
+          focus:outline-none focus:border-accent
+        "
+        name="url"
+        type="text"
+        spellcheck="false"
+        :placeholder="$t('url')"
+        @keyup.enter="newSendRequest()"
+      />
+      <!-- <SmartUrlField v-else v-model="uri" /> -->
+    </div>
+    <div class="flex">
+      <span
+        id="send"
+        class="
+          px-4
+          py-2
+          border border-accent
+          font-mono
+          flex
+          items-center
+          truncate
+          font-semibold
+          bg-accent
+          text-white
+          cursor-pointer
+        "
+        @click="newSendRequest"
+      >
+        {{ $t("send") }}
+      </span>
+      <!-- <span
+        v-else
+        id="cancel"
+        class="
+          px-4
+          py-2
+          border border-accent
+          font-mono
+          flex
+          items-center
+          truncate
+          font-semibold
+          bg-accent
+          text-white
+          cursor-pointer
+        "
+        @click="cancelRequest"
+      >
+        {{ $t("cancel") }}
+      </span> -->
+      <tippy
+        ref="sendOptions"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <span
+            class="
+              px-1
+              py-2
+              border border-accent
+              font-mono
+              flex
+              items-center
+              justify-center
+              truncate
+              font-semibold
+              bg-accent
+              text-white
+              rounded-r-lg
+            "
+          >
+            <i class="material-icons">keyboard_arrow_down</i>
+          </span>
+        </template>
+        <SmartItem
+          :label="$t('import_curl')"
+          icon="import_export"
+          @click.native="
+            showCurlImportModal = !showCurlImportModal
+            $refs.sendOptions.tippy().hide()
+          "
+        />
+        <SmartItem
+          :label="$t('show_code')"
+          icon="code"
+          @click.native="
+            showCodegenModal = !showCodegenModal
+            $refs.sendOptions.tippy().hide()
+          "
+        />
+        <SmartItem
+          ref="clearAll"
+          :label="$t('clear_all')"
+          icon="clear_all"
+          @click.native="
+            clearContent('', $event)
+            $refs.sendOptions.tippy().hide()
+          "
+        />
+      </tippy>
+      <span
+        class="
+          ml-4
+          px-4
+          py-2
+          border border-divider
+          font-mono
+          flex
+          items-center
+          justify-center
+          truncate
+          font-semibold
+          rounded-l-lg
+          cursor-pointer
+        "
+        @click="newSendRequest"
+      >
+        Save
+      </span>
+      <tippy
+        ref="saveOptions"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <span
+            class="
+              px-1
+              py-2
+              border border-divider
+              font-mono
+              flex
+              items-center
+              justify-center
+              truncate
+              font-semibold
+              rounded-r-lg
+            "
+          >
+            <i class="material-icons">keyboard_arrow_down</i>
+          </span>
+        </template>
+        <SmartItem :description="$t('token_req_name')" />
+        <input
+          id="request-name"
+          v-model="name"
+          name="request-name"
+          type="text"
+          class="input text-sm"
+        />
+        <SmartItem
+          ref="copyRequest"
+          :label="$t('copy_request_link')"
+          :icon="navigatorShare ? 'share' : 'content_copy'"
+          @click.native="
+            copyRequest()
+            $refs.saveOptions.tippy().hide()
+          "
+        />
+        <SmartItem
+          ref="saveRequest"
+          :label="$t('save_to_collections')"
+          icon="create_new_folder"
+          @click.native="
+            saveRequest()
+            $refs.saveOptions.tippy().hide()
+          "
+        />
+      </tippy>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  updateRESTResponse,
+  restRequest$,
+  restEndpoint$,
+  setRESTEndpoint,
+  restMethod$,
+  updateRESTMethod,
+} from "~/newstore/RESTSession"
+import { createRESTNetworkRequestStream } from "~/helpers/network"
+import { currentEnvironment$ } from "~/newstore/environments"
+import { getEffectiveRESTRequestStream } from "~/helpers/utils/EffectiveURL"
+
+export default {
+  data() {
+    return {
+      newMethod$: "",
+      methodMenuItems: [
+        "GET",
+        "HEAD",
+        "POST",
+        "PUT",
+        "DELETE",
+        "CONNECT",
+        "OPTIONS",
+        "TRACE",
+        "PATCH",
+        "CUSTOM",
+      ],
+      name: "",
+      newEndpoint$: "",
+      showCurlImportModal: false,
+      showCodegenModal: false,
+      navigatorShare: navigator.share,
+      effectiveStream$: null,
+    }
+  },
+  subscriptions() {
+    return {
+      newMethod$: restMethod$,
+      newEndpoint$: restEndpoint$,
+      effectiveStream$: getEffectiveRESTRequestStream(
+        restRequest$,
+        currentEnvironment$
+      ),
+    }
+  },
+  watch: {
+    newEndpoint$(newVal) {
+      setRESTEndpoint(newVal)
+    },
+  },
+  mounted() {},
+  methods: {
+    updateMethod(method) {
+      updateRESTMethod(method)
+    },
+    newSendRequest() {
+      this.$subscribeTo(
+        createRESTNetworkRequestStream(
+          this.effectiveStream$,
+          currentEnvironment$
+        ),
+        (responseState) => {
+          console.log(responseState)
+          updateRESTResponse(responseState)
+        }
+      )
+    },
+  },
+}
+</script>
diff --git a/components/http/Response.vue b/components/http/Response.vue
index dd90365a2..8b7ee49c2 100644
--- a/components/http/Response.vue
+++ b/components/http/Response.vue
@@ -1,22 +1,22 @@
 <template>
   <AppSection label="response">
-    <HttpResponseMeta :response="response" :active="active" />
-    <div v-if="response.body && response.body !== $t('loading')">
-      <LensesResponseBodyRenderer :response="response" />
-    </div>
+    <HttpResponseMeta v-if="!loading" :response="response" />
+    <LensesResponseBodyRenderer v-if="!loading" :response="response" />
   </AppSection>
 </template>
 
 <script>
+import { restResponse$ } from "~/newstore/RESTSession"
+
 export default {
-  props: {
-    response: {
-      type: Object,
-      default: () => {},
-    },
-    active: {
-      type: Boolean,
-      default: false,
+  subscriptions() {
+    return {
+      response: restResponse$,
+    }
+  },
+  computed: {
+    loading() {
+      return this.response === null || this.response.type === "loading"
     },
   },
 }
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 19b8e57fb..b77e2b855 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -11,20 +11,21 @@
       font-mono font-semibold
       space-x-8
     "
-    :class="statusCategory ? statusCategory.className : ''"
   >
-    <i v-if="active" class="animate-spin material-icons">refresh</i>
+    <i v-if="response.type === 'loading'" class="animate-spin material-icons"
+      >refresh</i
+    >
     <span v-else>
       <span class="text-secondaryDark"> Status: </span>
-      {{ response.status || $t("waiting_send_req") }}
+      {{ response.statusCode || $t("waiting_send_req") }}
     </span>
-    <span v-if="response.duration" class="text-xs">
+    <span class="text-xs">
       <span class="text-secondaryDark"> Time: </span>
-      {{ `${response.duration} ms` }}
+      {{ `${response.meta.responseDuration} ms` }}
     </span>
-    <span v-if="response.size" class="text-xs">
+    <span class="text-xs">
       <span class="text-secondaryDark"> Size: </span>
-      {{ `${response.size} B` }}
+      {{ `${response.meta.responseSize} B` }}
     </span>
   </div>
 </template>
@@ -38,14 +39,10 @@ export default {
       type: Object,
       default: () => {},
     },
-    active: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     statusCategory() {
-      return findStatusGroup(this.response.status)
+      return findStatusGroup(this.response.statusCode)
     },
   },
 }
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index c9ad2d04d..c6b42b7e3 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="p-2 font-mono">
-    <div v-for="(value, key) in headers" :key="key" class="flex items-center">
+    <div
+      v-for="(header, index) in headers"
+      :key="index"
+      class="flex items-center"
+    >
       <span
         class="
           p-2
@@ -13,7 +17,7 @@
         "
       >
         <span class="truncate">
-          {{ key }}
+          {{ header.key }}
         </span>
       </span>
       <span
@@ -41,7 +45,7 @@
         "
       >
         <span class="truncate">
-          {{ value }}
+          {{ header.value }}
         </span>
       </span>
     </div>
@@ -51,7 +55,7 @@
 <script>
 export default {
   props: {
-    headers: { type: Object, default: () => {} },
+    headers: { type: Array, default: () => [] },
   },
 }
 </script>
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 5967622ed..215c2ca87 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -22,6 +22,7 @@
       @keyup="updateSuggestions"
       @click="updateSuggestions"
       @keydown="handleKeystroke"
+      @change="$emit('change', $event)"
     />
     <ul
       v-if="suggestions.length > 0 && suggestionsVisible"
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index d7f50f4a3..be31da7a7 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -7,7 +7,8 @@
       inline-flex
       px-4
       py-2
-      text-sm
+      text-xs
+      font-semibold
       transition
       rounded-lg
       focus:bg-primaryDark focus:text-secondaryDark
diff --git a/components/smart/Tab.vue b/components/smart/Tab.vue
index 63f65810b..f62a58b5e 100644
--- a/components/smart/Tab.vue
+++ b/components/smart/Tab.vue
@@ -8,6 +8,7 @@
 export default {
   props: {
     label: { type: String, default: null },
+    info: { type: String, default: null },
     icon: { type: String, default: null },
     id: { type: String, default: null, required: true },
     selected: {
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 99ae22106..968d7e7bf 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -16,6 +16,9 @@
               {{ tab.icon }}
             </i>
             <span v-if="tab.label">{{ tab.label }}</span>
+            <span v-if="tab.info" class="tab-info">
+              {{ tab.info }}
+            </span>
           </button>
         </div>
       </div>
@@ -91,6 +94,20 @@ export default {
     @apply focus:outline-none;
     @apply relative;
 
+    .tab-info {
+      @apply inline-flex;
+      @apply items-center;
+      @apply justify-center;
+      @apply w-5;
+      @apply h-4;
+      @apply ml-2;
+      @apply text-8px;
+      @apply border border-divider;
+      @apply font-mono;
+      @apply rounded;
+      @apply text-secondaryLight;
+    }
+
     &::after {
       @apply absolute;
       @apply inset-x-0;
@@ -110,6 +127,11 @@ export default {
       @apply text-accent;
       @apply border-accent;
 
+      .tab-info {
+        @apply text-secondary;
+        @apply border-dividerDark;
+      }
+
       &::after {
         @apply bg-accent;
       }
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index a6fcd3313..f213ea9f2 100644
--- a/helpers/lenses/lenses.js
+++ b/helpers/lenses/lenses.js
@@ -7,13 +7,14 @@ import xmlLens from "./xmlLens"
 export const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
 export function getSuitableLenses(response) {
-  if (!response || !response.headers || !response.headers["content-type"])
-    return [rawLens]
+  const contentType = response.headers.find((h) => h.key === "content-type")
+  console.log(contentType)
+
+  if (!contentType) return [rawLens]
 
   const result = []
   for (const lens of lenses) {
-    if (lens.isSupportedContentType(response.headers["content-type"]))
-      result.push(lens)
+    if (lens.isSupportedContentType(contentType.value)) result.push(lens)
   }
 
   return result
diff --git a/helpers/network.js b/helpers/network.ts
similarity index 53%
rename from helpers/network.js
rename to helpers/network.ts
index ca291440e..887f902cd 100644
--- a/helpers/network.js
+++ b/helpers/network.ts
@@ -1,3 +1,4 @@
+import { BehaviorSubject, Observable } from "rxjs"
 import AxiosStrategy, {
   cancelRunningAxiosRequest,
 } from "./strategies/AxiosStrategy"
@@ -5,6 +6,8 @@ import ExtensionStrategy, {
   cancelRunningExtensionRequest,
   hasExtensionInstalled,
 } from "./strategies/ExtensionStrategy"
+import { HoppRESTResponse } from "./types/HoppRESTResponse"
+import { EffectiveHoppRESTRequest } from "./utils/EffectiveURL"
 import { settingsStore } from "~/newstore/settings"
 
 export const cancelRunningRequest = () => {
@@ -17,7 +20,7 @@ export const cancelRunningRequest = () => {
 
 const isExtensionsAllowed = () => settingsStore.value.EXTENSIONS_ENABLED
 
-const runAppropriateStrategy = (req) => {
+const runAppropriateStrategy = (req: any) => {
   if (isExtensionsAllowed() && hasExtensionInstalled()) {
     return ExtensionStrategy(req)
   }
@@ -41,5 +44,37 @@ export function getCurrentStrategyID() {
   }
 }
 
-export const sendNetworkRequest = (req) =>
+export const sendNetworkRequest = (req: any) =>
   runAppropriateStrategy(req).finally(() => window.$nuxt.$loading.finish())
+
+export function createRESTNetworkRequestStream(
+  req: EffectiveHoppRESTRequest
+): Observable<HoppRESTResponse> {
+  const response = new BehaviorSubject<HoppRESTResponse>({ type: "loading" })
+
+  runAppropriateStrategy({
+    url: req.effectiveFinalURL,
+  }).then((res: any) => {
+    console.log(res)
+
+    const resObj: HoppRESTResponse = {
+      type: "success",
+      statusCode: res.status,
+      body: res.data,
+      headers: Object.keys(res.headers).map((x) => ({
+        key: x,
+        value: res.headers[x],
+      })),
+      meta: {
+        // TODO: Implement
+        responseSize: 0,
+        responseDuration: 0,
+      },
+    }
+    response.next(resObj)
+
+    response.complete()
+  })
+
+  return response
+}
diff --git a/helpers/types/HoppRESTResponse.ts b/helpers/types/HoppRESTResponse.ts
new file mode 100644
index 000000000..a6f8ec951
--- /dev/null
+++ b/helpers/types/HoppRESTResponse.ts
@@ -0,0 +1,22 @@
+export type HoppRESTResponse =
+  | { type: "loading" }
+  | {
+      type: "fail"
+      headers: { key: string; value: string }[]
+      body: ArrayBuffer
+      statusCode: number
+    }
+  | {
+      type: "network_fail"
+      error: Error
+    }
+  | {
+      type: "success"
+      headers: { key: string; value: string }[]
+      body: ArrayBuffer
+      statusCode: number
+      meta: {
+        responseSize: number // in bytes
+        responseDuration: number // in millis
+      }
+    }
diff --git a/helpers/utils/EffectiveURL.ts b/helpers/utils/EffectiveURL.ts
index 9ef9a6050..23089b769 100644
--- a/helpers/utils/EffectiveURL.ts
+++ b/helpers/utils/EffectiveURL.ts
@@ -3,7 +3,7 @@ import { map } from "rxjs/operators"
 import { HoppRESTRequest } from "../types/HoppRESTRequest"
 import { Environment } from "~/newstore/environments"
 
-interface EffectiveHoppRESTRequest extends HoppRESTRequest {
+export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   /**
    * The effective final URL.
    *
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 6593579dc..e6670a6f5 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -1,10 +1,11 @@
-import { pluck, distinctUntilChanged } from "rxjs/operators"
+import { pluck, distinctUntilChanged, map } from "rxjs/operators"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import {
   HoppRESTHeader,
   HoppRESTParam,
   HoppRESTRequest,
 } from "~/helpers/types/HoppRESTRequest"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
 function getParamsInURL(url: string): { key: string; value: string }[] {
   const result: { key: string; value: string }[] = []
@@ -109,6 +110,7 @@ function updateURLParam(
 
 type RESTSession = {
   request: HoppRESTRequest
+  response: HoppRESTResponse | null
 }
 
 const defaultRESTSession: RESTSession = {
@@ -118,6 +120,7 @@ const defaultRESTSession: RESTSession = {
     headers: [],
     method: "GET",
   },
+  response: null,
 }
 
 const dispatchers = defineDispatchers({
@@ -269,6 +272,27 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  deleteAllHeaders(curr: RESTSession) {
+    return {
+      request: {
+        ...curr.request,
+        headers: [],
+      },
+    }
+  },
+  updateResponse(
+    _curr: RESTSession,
+    { updatedRes }: { updatedRes: HoppRESTResponse | null }
+  ) {
+    return {
+      response: updatedRes,
+    }
+  },
+  clearResponse(_curr: RESTSession) {
+    return {
+      response: null,
+    }
+  },
 })
 
 const restSessionStore = new DispatchingStore(defaultRESTSession, dispatchers)
@@ -354,6 +378,29 @@ export function deleteRESTHeader(index: number) {
   })
 }
 
+export function deleteAllRESTHeaders() {
+  restSessionStore.dispatch({
+    dispatcher: "deleteAllHeaders",
+    payload: {},
+  })
+}
+
+export function updateRESTResponse(updatedRes: HoppRESTResponse | null) {
+  restSessionStore.dispatch({
+    dispatcher: "updateResponse",
+    payload: {
+      updatedRes,
+    },
+  })
+}
+
+export function clearRESTResponse() {
+  restSessionStore.dispatch({
+    dispatcher: "clearResponse",
+    payload: {},
+  })
+}
+
 export const restRequest$ = restSessionStore.subject$.pipe(
   pluck("request"),
   distinctUntilChanged()
@@ -369,7 +416,25 @@ export const restParams$ = restSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
+export const restActiveParamsCount$ = restParams$.pipe(
+  map((params) => params.filter((x) => x.active).length)
+)
+
 export const restMethod$ = restSessionStore.subject$.pipe(
   pluck("request", "method"),
   distinctUntilChanged()
 )
+
+export const restHeaders$ = restSessionStore.subject$.pipe(
+  pluck("request", "headers"),
+  distinctUntilChanged()
+)
+
+export const restActiveHeadersCount$ = restHeaders$.pipe(
+  map((params) => params.filter((x) => x.active).length)
+)
+
+export const restResponse$ = restSessionStore.subject$.pipe(
+  pluck("response"),
+  distinctUntilChanged()
+)
diff --git a/newstore/environments.ts b/newstore/environments.ts
index 61a132f84..7d0321cff 100644
--- a/newstore/environments.ts
+++ b/newstore/environments.ts
@@ -1,4 +1,5 @@
-import { pluck } from "rxjs/operators"
+import { combineLatest } from "rxjs"
+import { map, pluck } from "rxjs/operators"
 import DispatchingStore, {
   defineDispatchers,
 } from "~/newstore/DispatchingStore"
@@ -202,6 +203,24 @@ export const selectedEnvIndex$ = environmentsStore.subject$.pipe(
   pluck("currentEnvironmentIndex")
 )
 
+export const currentEnvironment$ = combineLatest([
+  environments$,
+  selectedEnvIndex$,
+]).pipe(
+  map(([envs, selectedIndex]) => {
+    if (selectedIndex === -1) {
+      const env: Environment = {
+        name: "No Environment",
+        variables: [],
+      }
+
+      return env
+    } else {
+      return envs[selectedIndex]
+    }
+  })
+)
+
 export function getCurrentEnvironment(): Environment {
   if (environmentsStore.value.currentEnvironmentIndex === -1) {
     return {
diff --git a/package-lock.json b/package-lock.json
index e86cd945a..96f867402 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "socketio-wildcard": "^2.0.0",
         "splitpanes": "^2.3.6",
         "tern": "^0.24.3",
-        "three": "^0.130.0",
+        "three": "^0.130.1",
         "three-globe": "^2.18.5",
         "three-trackballcontrols": "^0.9.0",
         "vue-apollo": "^3.0.7",
@@ -27994,9 +27994,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.130.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.130.0.tgz",
-      "integrity": "sha512-4jqvbJyvgrjTsBgqE7TrdkZral78l8CXpFCdGzqQoiJHsRhGHxe5tvwqZQVaS6eodPav7jdYO5sp1c5RmMB3ng=="
+      "version": "0.130.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.130.1.tgz",
+      "integrity": "sha512-OSPPKcGvFSiGkG3jFrwwC76PBV/ZSrGxpBbg28bW8s9GU8r/y2spNGtEXHEb/CVqo0Ctf5Lx2rVaxQZB6OasaA=="
     },
     "node_modules/three-conic-polygon-geometry": {
       "version": "1.4.4",
@@ -55085,9 +55085,9 @@
       }
     },
     "three": {
-      "version": "0.130.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.130.0.tgz",
-      "integrity": "sha512-4jqvbJyvgrjTsBgqE7TrdkZral78l8CXpFCdGzqQoiJHsRhGHxe5tvwqZQVaS6eodPav7jdYO5sp1c5RmMB3ng=="
+      "version": "0.130.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.130.1.tgz",
+      "integrity": "sha512-OSPPKcGvFSiGkG3jFrwwC76PBV/ZSrGxpBbg28bW8s9GU8r/y2spNGtEXHEb/CVqo0Ctf5Lx2rVaxQZB6OasaA=="
     },
     "three-conic-polygon-geometry": {
       "version": "1.4.4",
diff --git a/package.json b/package.json
index 20555fca2..e5015a9ed 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "socketio-wildcard": "^2.0.0",
     "splitpanes": "^2.3.6",
     "tern": "^0.24.3",
-    "three": "^0.130.0",
+    "three": "^0.130.1",
     "three-globe": "^2.18.5",
     "three-trackballcontrols": "^0.9.0",
     "vue-apollo": "^3.0.7",
diff --git a/pages/index.vue b/pages/index.vue
index ecf46ed1a..a72ea65b7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,259 +5,13 @@
       <Pane class="overflow-auto hide-scrollbar">
         <Splitpanes horizontal :dbl-click-splitter="false">
           <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
-                    interactive
-                    ref="options"
-                    tabindex="-1"
-                    trigger="click"
-                    theme="popover"
-                    arrow
-                  >
-                    <template #trigger>
-                      <input
-                        id="method"
-                        class="
-                          flex
-                          rounded-l-lg
-                          bg-primaryLight
-                          font-mono
-                          w-32
-                          px-4
-                          py-2
-                          truncate
-                          text-secondaryDark
-                          font-semibold
-                          border border-divider
-                          transition
-                          focus:outline-none focus:border-accent
-                          pointer-cursor
-                        "
-                        :value="newMethod$"
-                        :readonly="!customMethod"
-                        autofocus
-                      />
-                    </template>
-                    <SmartItem
-                      v-for="(methodMenuItem, index) in methodMenuItems"
-                      :key="`method-${index}`"
-                      @click.native="
-                        customMethod = methodMenuItem == 'CUSTOM' ? true : false
-                        updateMethod(methodMenuItem)
-                        $refs.options.tippy().hide()
-                      "
-                      :label="methodMenuItem"
-                    />
-                  </tippy>
-                </span>
-              </div>
-              <div class="flex-1 inline-flex">
-                <input
-                  v-if="!EXPERIMENTAL_URL_BAR_ENABLED"
-                  :class="{ error: !isValidURL }"
-                  class="
-                    w-full
-                    font-mono font-semibold
-                    truncate
-                    text-secondaryDark
-                    px-4
-                    py-2
-                    border border-divider
-                    bg-primaryLight
-                    transition
-                    focus:outline-none focus:border-accent
-                  "
-                  @keyup.enter="isValidURL ? sendRequest() : null"
-                  id="url"
-                  name="url"
-                  type="text"
-                  v-model="newEndpoint$"
-                  spellcheck="false"
-                  @input="pathInputHandler"
-                  :placeholder="$t('url')"
-                />
-                <SmartUrlField v-model="uri" v-else />
-              </div>
-              <div class="flex">
-                <span
-                  id="send"
-                  :disabled="!isValidURL"
-                  @click="sendRequest"
-                  v-if="!runningRequest"
-                  class="
-                    px-4
-                    py-2
-                    border border-accent
-                    font-mono
-                    flex
-                    items-center
-                    truncate
-                    font-semibold
-                    bg-accent
-                    text-white
-                    cursor-pointer
-                  "
-                >
-                  {{ $t("send") }}
-                </span>
-                <span
-                  id="cancel"
-                  @click="cancelRequest"
-                  v-else
-                  class="
-                    px-4
-                    py-2
-                    border border-accent
-                    font-mono
-                    flex
-                    items-center
-                    truncate
-                    font-semibold
-                    bg-accent
-                    text-white
-                    cursor-pointer
-                  "
-                >
-                  {{ $t("cancel") }}
-                </span>
-                <tippy
-                  ref="sendOptions"
-                  interactive
-                  tabindex="-1"
-                  trigger="click"
-                  theme="popover"
-                  arrow
-                >
-                  <template #trigger>
-                    <span
-                      class="
-                        px-1
-                        py-2
-                        border border-accent
-                        font-mono
-                        flex
-                        items-center
-                        justify-center
-                        truncate
-                        font-semibold
-                        bg-accent
-                        text-white
-                        rounded-r-lg
-                      "
-                    >
-                      <i class="material-icons">keyboard_arrow_down</i>
-                    </span>
-                  </template>
-                  <SmartItem
-                    :label="$t('import_curl')"
-                    icon="import_export"
-                    @click.native="
-                      showCurlImportModal = !showCurlImportModal
-                      $refs.sendOptions.tippy().hide()
-                    "
-                  />
-                  <SmartItem
-                    @click.native="
-                      showCodegenModal = !showCodegenModal
-                      $refs.sendOptions.tippy().hide()
-                    "
-                    :disabled="!isValidURL"
-                    :label="$t('show_code')"
-                    icon="code"
-                  />
-                  <SmartItem
-                    @click.native="
-                      clearContent('', $event)
-                      $refs.sendOptions.tippy().hide()
-                    "
-                    :label="$t('clear_all')"
-                    ref="clearAll"
-                    icon="clear_all"
-                  />
-                </tippy>
-                <span
-                  class="
-                    ml-4
-                    px-4
-                    py-2
-                    border border-divider
-                    font-mono
-                    flex
-                    items-center
-                    justify-center
-                    truncate
-                    font-semibold
-                    rounded-l-lg
-                    cursor-pointer
-                  "
-                  @click="saveRequest"
-                >
-                  Save
-                </span>
-                <tippy
-                  ref="saveOptions"
-                  interactive
-                  tabindex="-1"
-                  trigger="click"
-                  theme="popover"
-                  arrow
-                >
-                  <template #trigger>
-                    <span
-                      class="
-                        px-1
-                        py-2
-                        border border-divider
-                        font-mono
-                        flex
-                        items-center
-                        justify-center
-                        truncate
-                        font-semibold
-                        rounded-r-lg
-                      "
-                    >
-                      <i class="material-icons">keyboard_arrow_down</i>
-                    </span>
-                  </template>
-                  <SmartItem :description="$t('token_req_name')" />
-                  <input
-                    id="request-name"
-                    name="request-name"
-                    type="text"
-                    v-model="name"
-                    class="input text-sm"
-                  />
-                  <SmartItem
-                    @click.native="
-                      copyRequest()
-                      $refs.saveOptions.tippy().hide()
-                    "
-                    ref="copyRequest"
-                    :disabled="!isValidURL"
-                    :label="$t('copy_request_link')"
-                    :icon="navigatorShare ? 'share' : 'content_copy'"
-                  />
-                  <SmartItem
-                    @click.native="
-                      saveRequest()
-                      $refs.saveOptions.tippy().hide()
-                    "
-                    ref="saveRequest"
-                    :disabled="!isValidURL"
-                    :label="$t('save_to_collections')"
-                    icon="create_new_folder"
-                  />
-                </tippy>
-              </div>
-            </div>
+            <HttpRequest />
             <SmartTabs styles="sticky top-70px z-10">
               <SmartTab
                 :id="'params'"
                 :label="$t('parameters')"
                 :selected="true"
+                :info="newActiveParamsCount$"
               >
                 <HttpParameters />
               </SmartTab>
@@ -348,20 +102,10 @@
 
               <SmartTab
                 :id="'headers'"
-                :label="
-                  $t('headers') +
-                  `${
-                    headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''
-                  }`
-                "
+                :label="$t('headers')"
+                :info="newActiveHeadersCount$"
               >
-                <HttpHeaders
-                  :headers="headers"
-                  @clear-content="clearContent"
-                  @set-route-query-state="setRouteQueryState"
-                  @remove-request-header="removeRequestHeader"
-                  @add-request-header="addRequestHeader"
-                />
+                <HttpHeaders />
               </SmartTab>
 
               <SmartTab :id="'authentication'" :label="$t('authentication')">
@@ -860,12 +604,11 @@ import { getSettingSubject, applySetting } from "~/newstore/settings"
 import { addRESTHistoryEntry } from "~/newstore/history"
 import clone from "lodash/clone"
 import {
-  restMethod$,
-  restEndpoint$,
   restRequest$,
-  setRESTEndpoint,
-  updateRESTMethod,
+  restActiveParamsCount$,
+  restActiveHeadersCount$,
 } from "~/newstore/RESTSession"
+import { map } from "rxjs/operators"
 
 export default {
   components: { Splitpanes, Pane },
@@ -896,27 +639,15 @@ export default {
       showTokenRequestList: false,
       showSaveRequestModal: false,
       editRequest: {},
-      customMethod: false,
       files: [],
       filenames: "",
-      navigatorShare: navigator.share,
       runningRequest: false,
       currentMethodIndex: 0,
-      methodMenuItems: [
-        "GET",
-        "HEAD",
-        "POST",
-        "PUT",
-        "DELETE",
-        "CONNECT",
-        "OPTIONS",
-        "TRACE",
-        "PATCH",
-        "CUSTOM",
-      ],
 
-      newEndpoint$: "",
-      newMethod$: "",
+      newActiveParamsCount$: "",
+      newActiveHeadersCount$: "",
+
+      effectiveStream$: null,
     }
   },
   subscriptions() {
@@ -927,14 +658,21 @@ export default {
       EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
         "EXPERIMENTAL_URL_BAR_ENABLED"
       ),
-      newEndpoint$: restEndpoint$,
-      newMethod$: restMethod$,
+      newActiveParamsCount$: restActiveParamsCount$.pipe(
+        map((e) => {
+          if (e == 0) return null
+          return e.toString()
+        })
+      ),
+      newActiveHeadersCount$: restActiveHeadersCount$.pipe(
+        map((e) => {
+          if (e == 0) return null
+          return e.toString()
+        })
+      ),
     }
   },
   watch: {
-    newEndpoint$(newVal) {
-      setRESTEndpoint(newVal)
-    },
     canListParameters: {
       immediate: true,
       handler(canListParameters) {
@@ -1400,9 +1138,6 @@ export default {
     },
   },
   methods: {
-    updateMethod(method) {
-      updateRESTMethod(method)
-    },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
         behavior: "smooth",
@@ -1477,6 +1212,7 @@ export default {
     cancelRequest() {
       cancelRunningRequest()
     },
+    newSendRequest() {},
     async sendRequest() {
       this.$toast.clear()
       if (this.SCROLL_INTO_ENABLED) this.scrollInto("response")