From b7ccb9a34c45a51bdb84f2d9936dfe31cc3debf7 Mon Sep 17 00:00:00 2001
From: Akash Hamirwasia <akash.hamirwasia@gmail.com>
Date: Tue, 12 Oct 2021 21:19:29 +0530
Subject: [PATCH] feat: disable inputs in realtime and graphql connections when
 active (#1870)

---
 packages/hoppscotch-app/components/graphql/Request.vue    | 1 +
 packages/hoppscotch-app/components/realtime/Mqtt.vue      | 1 +
 packages/hoppscotch-app/components/realtime/Socketio.vue  | 7 +++++++
 packages/hoppscotch-app/components/realtime/Sse.vue       | 4 +++-
 packages/hoppscotch-app/components/realtime/Websocket.vue | 1 +
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/components/graphql/Request.vue b/packages/hoppscotch-app/components/graphql/Request.vue
index 304ca6482..96d80bf12 100644
--- a/packages/hoppscotch-app/components/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/graphql/Request.vue
@@ -20,6 +20,7 @@
           focus-visible:bg-transparent focus-visible:border-dividerDark
         "
         :placeholder="$t('request.url')"
+        :disabled="connected"
         @keyup.enter="onConnectClick"
       />
       <ButtonPrimary
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 8ee1edb8d..639e47fb3 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -34,6 +34,7 @@
                     focus-visible:border-dividerDark
                   "
                   :placeholder="$t('mqtt.url')"
+                  :disabled="connectionState"
                 />
                 <ButtonPrimary
                   id="connect"
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index f143e4c6d..490216aaf 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -46,6 +46,7 @@
                             "
                             :value="`Client ${clientVersion}`"
                             readonly
+                            :disabled="connectionState"
                           />
                         </span>
                       </template>
@@ -78,6 +79,7 @@
                       focus-visible:border-dividerDark
                     "
                     :placeholder="$t('socketio.url')"
+                    :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
                   />
                   <input
@@ -97,6 +99,7 @@
                       focus-visible:border-dividerDark
                     "
                     spellcheck="false"
+                    :disabled="connectionState"
                   />
                 </div>
                 <ButtonPrimary
@@ -261,6 +264,10 @@ export default defineComponent({
     url() {
       this.debouncer()
     },
+    connectionState(connected) {
+      if (connected) this.$refs.versionOptions.tippy().disable()
+      else this.$refs.versionOptions.tippy().enable()
+    },
   },
   mounted() {
     if (process.browser) {
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index e5af74b02..b5edd944a 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -28,10 +28,11 @@
                 focus-visible:bg-transparent focus-visible:border-dividerDark
               "
               :placeholder="$t('sse.url')"
+              :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
             <label
-              for="url"
+              for="event-type"
               class="
                 bg-primaryLight
                 border-t border-b border-divider
@@ -60,6 +61,7 @@
                 focus-visible:bg-transparent focus-visible:border-dividerDark
               "
               spellcheck="false"
+              :disabled="connectionSSEState"
             />
           </div>
           <ButtonPrimary
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index 00a063a84..8ae56f1b6 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -35,6 +35,7 @@
                   spellcheck="false"
                   :class="{ error: !urlValid }"
                   :placeholder="$t('websocket.url')"
+                  :disabled="connectionState"
                   @keyup.enter="urlValid ? toggleConnection() : null"
                 />
                 <ButtonPrimary