fix: sse, refactor(ui): tabs, feat: help button

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 {

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"

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"

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>

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>

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

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 ""

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",
+  "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"
 }

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>

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')