feat: disable inputs in realtime and graphql connections when active (#1870)

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

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -34,6 +34,7 @@
                     focus-visible:border-dividerDark
                   "
                   :placeholder="$t('mqtt.url')"
+                  :disabled="connectionState"
                 />
                 <ButtonPrimary
                   id="connect"

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

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

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