fix: realtime connect/disconnect issue (#2768)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/src/components.d.ts

@@ -98,14 +98,10 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']

packages/hoppscotch-app/src/components/button/Primary.vue

@@ -2,7 +2,7 @@
   <SmartLink
     :to="to"
     :blank="blank"
-    class="inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
+    class="relative inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
@@ -27,9 +27,8 @@
     role="button"
   >
     <span
-      v-if="!loading"
       class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }"
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
     >
       <component
         :is="icon"
@@ -51,7 +50,12 @@
         </kbd>
       </div>
     </span>
-    <SmartSpinner v-else />
+    <span
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <SmartSpinner />
+    </span>
   </SmartLink>
 </template>
 

packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -62,13 +62,13 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         aggregateEnvs.find(
           (env) => env.key === text.slice(start - from, end - from)
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-        )?.sourceEnv ?? "choose an environment"
+        )?.sourceEnv ?? "Choose an Environment"
 
       const envValue =
         aggregateEnvs.find(
           (env) => env.key === text.slice(start - from, end - from)
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-        )?.value ?? "not found"
+        )?.value ?? "Not found"
 
       const result = parseTemplateStringE(envValue, aggregateEnvs)
 

packages/hoppscotch-app/src/helpers/realtime/SSEConnection.ts

@@ -39,7 +39,10 @@ export class SSEConnection {
             time: Date.now(),
           })
         }
-        this.sse.onerror = this.handleError
+        this.sse.onerror = (e) => {
+          this.handleError(e)
+          this.stop()
+        }
         this.sse.addEventListener(eventType, ({ data }) => {
           this.addEvent({
             type: "MESSAGE_RECEIVED",
@@ -66,7 +69,6 @@ export class SSEConnection {
   }
 
   private handleError(error: Event) {
-    this.stop()
     this.addEvent({
       time: Date.now(),
       type: "ERROR",

packages/hoppscotch-app/src/pages/realtime/mqtt.vue

@@ -24,7 +24,9 @@
             :disabled="!isUrlValid"
             class="w-32"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "

packages/hoppscotch-app/src/pages/realtime/socketio.vue

@@ -82,7 +82,9 @@
             name="connect"
             class="w-32"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "

packages/hoppscotch-app/src/pages/realtime/sse.vue

@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="sse">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
@@ -42,7 +42,9 @@
             name="start"
             class="w-32"
             :label="
-              connectionState === 'STOPPED'
+              connectionState === 'STARTING'
+                ? t('action.starting')
+                : connectionState === 'STOPPED'
                 ? t('action.start')
                 : t('action.stop')
             "

packages/hoppscotch-app/src/pages/realtime/websocket.vue

@@ -26,7 +26,9 @@
             class="w-32"
             name="connect"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "