From 20ffbe906fb8475c6cea1ab67b567620ce54664b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 5 Aug 2021 11:06:37 +0530
Subject: [PATCH] fix: sse, refactor(ui): tabs, feat: help button

---
 assets/scss/styles.scss                |  6 ++-
 components/app/Footer.vue              | 61 +++++++++++++++++++++++++-
 components/collections/SaveRequest.vue |  6 ++-
 components/profile/Picture.vue         |  2 +-
 components/realtime/Log.vue            |  2 +-
 components/realtime/Sse.vue            | 36 +++++++++++++--
 helpers/utils/string.js                |  4 +-
 lang/en-US.json                        | 55 +++++++++++++----------
 pages/realtime.vue                     | 20 +++++++--
 pages/settings.vue                     | 10 +++--
 10 files changed, 159 insertions(+), 43 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 2a5e0231c..b3a457aed 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -89,6 +89,9 @@ a {
   @apply outline-none;
   @apply transition;
 
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+
   &.link {
     @apply items-center;
     @apply px-2 py-1;
@@ -151,7 +154,7 @@ a {
 
 .tippy-content > div {
   @apply flex flex-col;
-  @apply max-h-48;
+  @apply max-h-56;
   @apply items-stretch;
   @apply overflow-y-auto;
 
@@ -162,6 +165,7 @@ a {
 
 hr {
   @apply border-b border-dividerLight;
+  @apply my-2;
 }
 
 .heading {
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index e24ad803a..3cd28ec3a 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
@@ -21,7 +21,64 @@
           @click.native="toggleSetting('ZEN_MODE')"
         />
       </div>
-      <div>
+      <div class="flex">
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            tabindex="-1"
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                icon="help_center"
+                :title="$t('app.help')"
+                :shortcut="['?']"
+              />
+            </template>
+            <div class="flex flex-col">
+              <SmartItem
+                :label="$t('app.documentation')"
+                to="https://github.com/hoppscotch/hoppscotch/wiki"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.keyboard_shortcuts')"
+                @click.native="
+                  showShortcuts = true
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                :label="$t('app.whats_new')"
+                to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <hr />
+              <SmartItem
+                :label="$t('app.twitter')"
+                to="https://twitter.com/hoppscotch_io"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.terms_and_privacy')"
+                to="https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <div class="flex text-xs opacity-50 py-2 px-4">
+                {{ `${$t("app.name")} ${$t("app.version")}` }}
+              </div>
+            </div>
+          </tippy>
+        </span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           icon="keyboard"
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index aecf38dd7..831ac803e 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("save_request_as") }}</h3>
+      <h3 class="heading">{{ $t("collection.save_as") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
@@ -15,7 +15,9 @@
           class="input"
           type="text"
         />
-        <label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
+        <label class="font-semibold px-4 pt-4 pb-4">
+          {{ $t("collection.select_location") }}
+        </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
           :doc="false"
diff --git a/components/profile/Picture.vue b/components/profile/Picture.vue
index 50585881b..2d9a1be31 100644
--- a/components/profile/Picture.vue
+++ b/components/profile/Picture.vue
@@ -18,7 +18,7 @@
     <span
       v-if="indicator"
       :class="[
-        'border-primary rounded-full border-2 h-3 -top-1 -right-1 w-3 absolute',
+        'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
         indicatorStyles,
       ]"
     ></span>
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 597ad178b..266347c2d 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -21,7 +21,7 @@
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
           :style="{ color: entry.color }"
-          >@ {{ entry.ts }}{{ getSourcePrefix(entry.source)
+          >{{ entry.ts }}{{ getSourcePrefix(entry.source)
           }}{{ entry.payload }}</span
         >
       </span>
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index d14692bac..93f6b7017 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -12,7 +12,9 @@
               bg-primaryLight
               border border-divider
               rounded-l
+              flex
               font-semibold font-mono
+              flex-1
               text-secondaryDark
               w-full
               py-2
@@ -24,6 +26,31 @@
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
           />
+          <label
+            for="url"
+            class="bg-primaryLight border border-divider py-2 px-4 truncate"
+          >
+            {{ $t("event_type") }}
+          </label>
+          <input
+            id="event-type"
+            v-model="eventType"
+            class="
+              bg-primaryLight
+              border border-divider
+              flex
+              font-semibold font-mono
+              flex-1
+              text-secondaryDark
+              w-full
+              py-2
+              px-4
+              transition
+              truncate
+              focus:border-accent focus:outline-none
+            "
+            spellcheck="false"
+          />
           <ButtonPrimary
             id="start"
             :disabled="!serverValid"
@@ -68,6 +95,7 @@ export default {
         log: null,
         input: "",
       },
+      eventType: "data",
     }
   },
   computed: {
@@ -144,13 +172,13 @@ export default {
               icon: "sync_disabled",
             })
           }
-          this.sse.onmessage = ({ data }) => {
+          this.sse.addEventListener(this.eventType, ({ data }) => {
             this.events.log.push({
               payload: data,
               source: "server",
               ts: new Date().toLocaleTimeString(),
             })
-          }
+          })
         } catch (ex) {
           this.handleSSEError(ex)
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -169,7 +197,7 @@ export default {
       }
 
       logHoppRequestRunToAnalytics({
-        platform: "mqtt",
+        platform: "sse",
       })
     },
     handleSSEError(error) {
@@ -190,8 +218,8 @@ export default {
         })
     },
     stop() {
-      this.sse.onclose()
       this.sse.close()
+      this.sse.onclose()
     },
   },
 }
diff --git a/helpers/utils/string.js b/helpers/utils/string.js
index 8b048b20f..6967e1c35 100644
--- a/helpers/utils/string.js
+++ b/helpers/utils/string.js
@@ -3,9 +3,9 @@ export function getSourcePrefix(source) {
     // Source used for info messages.
     info: "\tℹ️ [INFO]:\t",
     // Source used for client to server messages.
-    client: "\t👽 [SENT]:\t",
+    client: "\t⬅️ [SENT]:\t",
     // Source used for server to client messages.
-    server: "\t📥 [RECEIVED]:\t",
+    server: "\t➡️ [RECEIVED]:\t",
   }
   if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
   return ""
diff --git a/lang/en-US.json b/lang/en-US.json
index ec30a2545..f57f52906 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -64,9 +64,20 @@
     "preview": "Hide Preview"
   },
   "app": {
-    "new_version_found": "New version found. Refresh to update."
+    "name": "Hoppscotch",
+    "version": "v2.0",
+    "documentation": "Documentation",
+    "whats_new": "What's new?",
+    "keyboard_shortcuts": "Keyboard shortcuts",
+    "new_version_found": "New version found. Refresh to update.",
+    "twitter": "Twitter",
+    "terms_and_privacy": "Terms and privacy",
+    "status": "Status",
+    "help": "Help, feedback and</br>documentation"
   },
   "collection": {
+    "save_as": "Save as",
+    "select_location": "Select location",
     "select": "Select a Collection",
     "invalid_name": "Please provide a valid name for the collection",
     "new": "New Collection",
@@ -162,7 +173,11 @@
     "change_font_size": "Change font size",
     "language": "Language",
     "choose_language": "Choose language",
-    "accent_color": "Accent color"
+    "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
+    "accent_color": "Accent color",
+    "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
+    "experiments": "Experiments",
+    "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, "
   },
   "layout": {
     "zen_mode": "Zen mode"
@@ -171,6 +186,20 @@
     "script": "Script",
     "results": "Results"
   },
+  "shortcut": {
+    "show_all": "Show all Shortcuts",
+    "send_request": "Send Request",
+    "save_to_collections": "Save to Collections",
+    "copy_request_link": "Copy Request Link",
+    "reset_request": "Reset Request",
+    "next_method": "Select Next method",
+    "previous_method": "Select Previous method",
+    "get_method": "Select GET method",
+    "head_method": "Select HEAD method",
+    "post_method": "Select POST method",
+    "put_method": "Select PUT method",
+    "delete_method": "Select DELETE method"
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -212,6 +241,7 @@
   "server": "Server",
   "events": "Events",
   "url": "URL",
+  "event_type": "Event type",
   "variables": "Variables",
   "get_schema": "Get schema",
   "header_list": "Header list",
@@ -275,7 +305,6 @@
   "deleted": "Deleted",
   "undo": "Undo",
   "edit_request": "Edit Request",
-  "save_request_as": "Save Request As",
   "connecting_to": "Connecting to {name}...",
   "connected": "Connected",
   "connected_to": "Connected to {name}",
@@ -373,23 +402,5 @@
   "event_name": "Event Name",
   "pre_request_script": "Pre-request Script",
   "tests": "Tests",
-  "create_new_environment": "Create new environment",
-  "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
-  "shortcut": {
-    "show_all": "Show all Shortcuts",
-    "send_request": "Send Request",
-    "save_to_collections": "Save to Collections",
-    "copy_request_link": "Copy Request Link",
-    "reset_request": "Reset Request",
-    "next_method": "Select Next method",
-    "previous_method": "Select Previous method",
-    "get_method": "Select GET method",
-    "head_method": "Select HEAD method",
-    "post_method": "Select POST method",
-    "put_method": "Select PUT method",
-    "delete_method": "Select DELETE method"
-  },
-  "experiments": "Experiments",
-  "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
-  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting"
+  "create_new_environment": "Create new environment"
 }
diff --git a/pages/realtime.vue b/pages/realtime.vue
index b2dbb1214..6bdcee594 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -7,17 +7,29 @@
       id="websocket"
       :label="$t('tab.websocket')"
       :selected="true"
-      class="h-full"
+      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
     >
       <RealtimeWebsocket />
     </SmartTab>
-    <SmartTab id="sse" :label="$t('sse')" class="h-full">
+    <SmartTab
+      id="sse"
+      :label="$t('sse')"
+      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
+    >
       <RealtimeSse />
     </SmartTab>
-    <SmartTab id="socketio" :label="$t('socketio')" class="h-full">
+    <SmartTab
+      id="socketio"
+      :label="$t('socketio')"
+      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
+    >
       <RealtimeSocketio />
     </SmartTab>
-    <SmartTab id="mqtt" :label="$t('tab.mqtt')" class="h-full">
+    <SmartTab
+      id="mqtt"
+      :label="$t('tab.mqtt')"
+      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
+    >
       <RealtimeMqtt />
     </SmartTab>
   </SmartTabs>
diff --git a/pages/settings.vue b/pages/settings.vue
index 2576bdf37..5d211f860 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -151,10 +151,10 @@
           </section>
           <section>
             <h4 class="font-bold text-secondaryDark">
-              {{ $t("experiments") }}
+              {{ $t("settings.experiments") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
-              {{ $t("experiments_notice") }}
+              {{ $t("settings.experiments_notice") }}
               <SmartLink
                 class="link"
                 to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
@@ -177,7 +177,7 @@
                   :on="EXPERIMENTAL_URL_BAR_ENABLED"
                   @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
                 >
-                  {{ $t("use_experimental_url_bar") }}
+                  {{ $t("settings.use_experimental_url_bar") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -343,7 +343,9 @@
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="`${$t('confirm.remove_telemetry')} ${$t('telemetry_helps_us')}`"
+      :title="`${$t('confirm.remove_telemetry')} ${$t(
+        'settings.telemetry_helps_us'
+      )}`"
       @hide-modal="confirmRemove = false"
       @resolve="
         toggleSetting('TELEMETRY_ENABLED')