feat: init new response state system

2021-07-13 11:07:29 +05:30
parent ffc891f38e
commit a4032836c3
20 changed files with 620 additions and 387 deletions
--- 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 {
--- 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()
    },
  },
 }
--- 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() {
--- a/components/http/Request.vue
+++ 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>
--- 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"
    },
  },
 }
--- 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)
    },
  },
 }
--- 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>
--- 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"
--- 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
--- 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: {
--- 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;
      }
--- 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
--- a/helpers/network.ts
+++ 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
+}
--- a/helpers/types/HoppRESTResponse.ts
+++ 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
+      }
+    }
--- 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.
   *
--- 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()
+)
--- 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 {
--- 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",
--- 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",
--- 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")