fix(ui): realtime pages

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: () => {} },

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: () => {} },

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"

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)

components/http/Headers.vue

@@ -165,7 +165,6 @@ import {
   deleteRESTHeader,
   deleteAllRESTHeaders,
 } from "~/newstore/RESTSession"
-
 import { commonHeaders } from "~/helpers/headers"
 import { getSettingSubject } from "~/newstore/settings"
 

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;
 

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"

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"

components/realtime/Sse.vue

@@ -1,7 +1,6 @@
 <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
@@ -20,7 +19,7 @@
               px-4
               transition
               truncate
-                focus:outline-none focus:border-accent
+              focus:border-accent focus:outline-none
             "
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -36,7 +35,6 @@
           />
         </div>
       </div>
-      </AppSection>
     </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"
 

components/realtime/Websocket.vue

@@ -39,7 +39,6 @@
                 />
               </div>
             </div>
-          </AppSection>
             <div
               class="
                 bg-primary
@@ -146,6 +145,7 @@
                 {{ $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() {

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"

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"

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"

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 {

pages/realtime.vue

@@ -1,15 +1,23 @@
 <template>
-  <SmartTabs>
+  <SmartTabs
-    <SmartTab id="websocket" :label="$t('tab.websocket')" :selected="true">
+    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>