From b2baeb0a5da38f277c7fc48e637a6a10e560ba38 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 4 Aug 2021 22:07:12 +0530
Subject: [PATCH] fix(ui): realtime pages

---
 components/collections/my/Request.vue    |   1 +
 components/collections/teams/Request.vue |   1 +
 components/graphql/QueryEditor.vue       |   1 -
 components/history/index.vue             |   6 +-
 components/http/Headers.vue              |   1 -
 components/realtime/Log.vue              |   2 +-
 components/realtime/Mqtt.vue             |   3 +-
 components/realtime/Socketio.vue         |   3 +-
 components/realtime/Sse.vue              |  69 ++++----
 components/realtime/Websocket.vue        | 207 ++++++++++++-----------
 helpers/tern.js                          |   1 -
 pages/documentation.vue                  |   1 +
 pages/graphql.vue                        |   1 +
 pages/index.vue                          |   1 -
 pages/realtime.vue                       |  18 +-
 15 files changed, 164 insertions(+), 152 deletions(-)

diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 4585ed21a..5f8a683b5 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -110,6 +110,7 @@
 <script>
 import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
+
 export default {
   props: {
     request: { type: Object, default: () => {} },
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 6f1f7ff2f..618c9b105 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -103,6 +103,7 @@
 <script>
 import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
+
 export default {
   props: {
     request: { type: Object, default: () => {} },
diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue
index 49707d31f..a81eaef7f 100644
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -9,7 +9,6 @@ import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
-
 import * as gql from "graphql"
 import { getAutocompleteSuggestions } from "graphql-language-service-interface"
 import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
diff --git a/components/history/index.vue b/components/history/index.vue
index b7a434aac..3df0a0c07 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -22,8 +22,8 @@
             py-2
             pr-2
             pl-9
-            focus:outline-none
             truncate
+            focus:outline-none
           "
           :placeholder="$t('search')"
         />
@@ -138,7 +138,9 @@ export default {
       })
     },
     useHistory(entry) {
-      setRESTRequest(entry)
+      if (this.page === "rest") setRESTRequest(entry)
+      // TODO: restore gql entry to request section
+      else console.log("not implemented yet")
     },
     deleteHistory(entry) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 696020658..fd535785e 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -165,7 +165,6 @@ import {
   deleteRESTHeader,
   deleteAllRESTHeaders,
 } from "~/newstore/RESTSession"
-
 import { commonHeaders } from "~/helpers/headers"
 import { getSettingSubject } from "~/newstore/settings"
 
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 2f83e9e1e..597ad178b 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -57,7 +57,7 @@ export default {
 <style scoped lang="scss">
 .realtime-log {
   @apply p-4;
-  @apply bg-primaryDark;
+  @apply bg-primaryLight;
   @apply text-secondary;
   @apply overflow-auto;
 
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 7fed19823..82d71824f 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -68,7 +68,7 @@
             spellcheck="false"
           />
         </div>
-        <div class="bg-primary flex flex-1 p-4 items-center justify-between">
+        <div class="flex flex-1 p-4 items-center justify-between">
           <label for="mqtt-message" class="font-semibold">{{
             $t("communication")
           }}</label>
@@ -133,6 +133,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index e90b021ee..64c20b094 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -93,7 +93,7 @@
             :disabled="!connectionState"
           />
         </div>
-        <div class="bg-primary flex flex-1 p-4 items-center justify-between">
+        <div class="flex flex-1 p-4 items-center justify-between">
           <label class="font-semibold">{{ $t("communication") }}</label>
           <div class="flex">
             <ButtonSecondary
@@ -149,6 +149,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import { io as Client } from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 5b66f6b61..d14692bac 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,42 +1,40 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" horizontal>
     <Pane class="hide-scrollbar !overflow-auto">
-      <AppSection label="request">
-        <div class="bg-primary flex p-4 top-0 z-10 sticky">
-          <div class="flex-1 inline-flex">
-            <input
-              id="server"
-              v-model="server"
-              type="url"
-              :class="{ error: !serverValid }"
-              class="
-                bg-primaryLight
-                border border-divider
-                rounded-l
-                font-semibold font-mono
-                text-secondaryDark
-                w-full
-                py-2
-                px-4
-                transition
-                truncate
-                focus:outline-none focus:border-accent
-              "
-              :placeholder="$t('url')"
-              @keyup.enter="serverValid ? toggleSSEConnection() : null"
-            />
-            <ButtonPrimary
-              id="start"
-              :disabled="!serverValid"
-              name="start"
-              class="rounded-l-none w-22"
-              :label="!connectionSSEState ? $t('start') : $t('stop')"
-              :loading="connectingState"
-              @click.native="toggleSSEConnection"
-            />
-          </div>
+      <div class="bg-primary flex p-4 top-0 z-10 sticky">
+        <div class="flex-1 inline-flex">
+          <input
+            id="server"
+            v-model="server"
+            type="url"
+            :class="{ error: !serverValid }"
+            class="
+              bg-primaryLight
+              border border-divider
+              rounded-l
+              font-semibold font-mono
+              text-secondaryDark
+              w-full
+              py-2
+              px-4
+              transition
+              truncate
+              focus:border-accent focus:outline-none
+            "
+            :placeholder="$t('url')"
+            @keyup.enter="serverValid ? toggleSSEConnection() : null"
+          />
+          <ButtonPrimary
+            id="start"
+            :disabled="!serverValid"
+            name="start"
+            class="rounded-l-none w-22"
+            :label="!connectionSSEState ? $t('start') : $t('stop')"
+            :loading="connectingState"
+            @click.native="toggleSSEConnection"
+          />
         </div>
-      </AppSection>
+      </div>
     </Pane>
     <Pane class="hide-scrollbar !overflow-auto">
       <AppSection label="response">
@@ -53,6 +51,7 @@
 
 <script>
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 248f5e9ff..2990ab895 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -39,113 +39,113 @@
                 />
               </div>
             </div>
-          </AppSection>
-          <div
-            class="
-              bg-primary
-              border-b border-dividerLight
-              flex flex-1
-              top-upperPrimaryStickyFold
-              pl-4
-              z-10
-              sticky
-              items-center
-              justify-between
-            "
-          >
-            <label class="font-semibold">
-              {{ $t("websocket.protocols") }}
-            </label>
-            <div class="flex">
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('clear_all')"
-                icon="clear_all"
-                @click.native="clearContent"
-              />
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('add.new')"
-                icon="add"
-                @click.native="addProtocol"
-              />
-            </div>
-          </div>
-          <div
-            v-for="(protocol, index) of protocols"
-            :key="`protocol-${index}`"
-            class="
-              divide-x divide-dividerLight
-              border-b border-dividerLight
-              flex
-            "
-            :class="{ 'border-t': index == 0 }"
-          >
-            <input
-              v-model="protocol.value"
+            <div
               class="
-                bg-primaryLight
-                flex
-                font-semibold font-mono
-                flex-1
-                py-2
-                px-4
-                focus:outline-none
+                bg-primary
+                border-b border-dividerLight
+                flex flex-1
+                top-upperPrimaryStickyFold
+                pl-4
+                z-10
+                sticky
+                items-center
+                justify-between
               "
-              :placeholder="$t('count.protocol', { count: index + 1 })"
-              name="message"
-              type="text"
-            />
-            <div>
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  protocol.hasOwnProperty('active')
-                    ? protocol.active
-                      ? $t('action.turn_off')
-                      : $t('action.turn_on')
-                    : $t('action.turn_off')
-                "
-                :icon="
-                  protocol.hasOwnProperty('active')
-                    ? protocol.active
-                      ? 'check_box'
-                      : 'check_box_outline_blank'
-                    : 'check_box'
-                "
-                color="green"
-                @click.native="
-                  protocol.active = protocol.hasOwnProperty('active')
-                    ? !protocol.active
-                    : false
-                "
-              />
+            >
+              <label class="font-semibold">
+                {{ $t("websocket.protocols") }}
+              </label>
+              <div class="flex">
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('clear_all')"
+                  icon="clear_all"
+                  @click.native="clearContent"
+                />
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('add.new')"
+                  icon="add"
+                  @click.native="addProtocol"
+                />
+              </div>
             </div>
-            <div>
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
-                icon="delete"
-                color="red"
-                @click.native="deleteProtocol({ index })"
+            <div
+              v-for="(protocol, index) of protocols"
+              :key="`protocol-${index}`"
+              class="
+                divide-x divide-dividerLight
+                border-b border-dividerLight
+                flex
+              "
+              :class="{ 'border-t': index == 0 }"
+            >
+              <input
+                v-model="protocol.value"
+                class="
+                  bg-primaryLight
+                  flex
+                  font-semibold font-mono
+                  flex-1
+                  py-2
+                  px-4
+                  focus:outline-none
+                "
+                :placeholder="$t('count.protocol', { count: index + 1 })"
+                name="message"
+                type="text"
               />
+              <div>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="
+                    protocol.hasOwnProperty('active')
+                      ? protocol.active
+                        ? $t('action.turn_off')
+                        : $t('action.turn_on')
+                      : $t('action.turn_off')
+                  "
+                  :icon="
+                    protocol.hasOwnProperty('active')
+                      ? protocol.active
+                        ? 'check_box'
+                        : 'check_box_outline_blank'
+                      : 'check_box'
+                  "
+                  color="green"
+                  @click.native="
+                    protocol.active = protocol.hasOwnProperty('active')
+                      ? !protocol.active
+                      : false
+                  "
+                />
+              </div>
+              <div>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('delete')"
+                  icon="delete"
+                  color="red"
+                  @click.native="deleteProtocol({ index })"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            v-if="protocols.length === 0"
-            class="
-              flex flex-col
-              text-secondaryLight
-              p-4
-              items-center
-              justify-center
-            "
-          >
-            <i class="opacity-75 pb-2 material-icons">topic</i>
-            <span class="text-center">
-              {{ $t("empty.protocols") }}
-            </span>
-          </div>
+            <div
+              v-if="protocols.length === 0"
+              class="
+                flex flex-col
+                text-secondaryLight
+                p-4
+                items-center
+                justify-center
+              "
+            >
+              <i class="opacity-75 pb-2 material-icons">topic</i>
+              <span class="text-center">
+                {{ $t("empty.protocols") }}
+              </span>
+            </div>
+          </AppSection>
         </Pane>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="response">
@@ -197,10 +197,11 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
-import "splitpanes/dist/splitpanes.css"
 import { useSetting } from "~/newstore/settings"
+
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
diff --git a/helpers/tern.js b/helpers/tern.js
index c2c32a4d6..4ffc09546 100644
--- a/helpers/tern.js
+++ b/helpers/tern.js
@@ -1,5 +1,4 @@
 import tern from "tern"
-
 import { registerTernLinter } from "./ternlint"
 import ECMA_DEF from "~/helpers/terndoc/ecma.json"
 import PW_PRE_DEF from "~/helpers/terndoc/pw-pre.json"
diff --git a/pages/documentation.vue b/pages/documentation.vue
index bdeb5d246..10695b4f4 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -175,6 +175,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import Mustache from "mustache"
 import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index a52437a71..21c5b404b 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -604,6 +604,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
diff --git a/pages/index.vue b/pages/index.vue
index 49ba0353f..ffb945d6a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -83,7 +83,6 @@ import {
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
-
 import { map } from "rxjs/operators"
 import { useSetting } from "~/newstore/settings"
 import {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 5307b4c08..b2dbb1214 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,15 +1,23 @@
 <template>
-  <SmartTabs>
-    <SmartTab id="websocket" :label="$t('tab.websocket')" :selected="true">
+  <SmartTabs
+    class="h-full overflow-hidden"
+    styles="sticky top-0 z-10 !overflow-visible"
+  >
+    <SmartTab
+      id="websocket"
+      :label="$t('tab.websocket')"
+      :selected="true"
+      class="h-full"
+    >
       <RealtimeWebsocket />
     </SmartTab>
-    <SmartTab id="sse" :label="$t('sse')">
+    <SmartTab id="sse" :label="$t('sse')" class="h-full">
       <RealtimeSse />
     </SmartTab>
-    <SmartTab id="socketio" :label="$t('socketio')">
+    <SmartTab id="socketio" :label="$t('socketio')" class="h-full">
       <RealtimeSocketio />
     </SmartTab>
-    <SmartTab id="mqtt" :label="$t('tab.mqtt')">
+    <SmartTab id="mqtt" :label="$t('tab.mqtt')" class="h-full">
       <RealtimeMqtt />
     </SmartTab>
   </SmartTabs>