feat: gql revamp (#2644)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/graphql/Request.vue

@@ -17,58 +17,127 @@
       <HoppButtonPrimary
         id="get"
         name="get"
-        :loading="isLoading"
+        :loading="connection.state === 'CONNECTING'"
         :label="!connected ? t('action.connect') : t('action.disconnect')"
         class="w-32"
         @click="onConnectClick"
       />
     </div>
   </div>
+  <HoppSmartModal
+    v-if="connectionSwitchModal"
+    dialog
+    :dimissible="false"
+    :title="t('graphql.switch_connection')"
+    @close="connectionSwitchModal = false"
+  >
+    <template #body>
+      <p class="mb-4">
+        {{ t("graphql.connection_switch_url") }}:
+        <kbd class="shortcut-key !ml-0"> {{ lastTwoUrls.at(0) }} </kbd>
+      </p>
+      <p class="mb-4">
+        {{ t("graphql.connection_switch_new_url") }}:
+        <kbd class="shortcut-key !ml-0"> {{ lastTwoUrls.at(1) }} </kbd>
+      </p>
+      <p>{{ t("graphql.connection_switch_confirm") }}</p>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.connect')"
+          :loading="connection.state === 'CONNECTING'"
+          outline
+          @click="switchConnection()"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="cancelSwitch()"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
 import { platform } from "~/platform"
-import { GQLConnection } from "~/helpers/GQLConnection"
-import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
-import {
-  gqlAuth$,
-  gqlHeaders$,
-  gqlURL$,
-  setGQLURL,
-} from "~/newstore/GQLSession"
-import { useService } from "dioc/vue"
+import { currentActiveTab } from "~/helpers/graphql/tab"
+import { computed, ref, watch } from "vue"
+import { connection } from "~/helpers/graphql/connection"
+import { connect } from "~/helpers/graphql/connection"
+import { disconnect } from "~/helpers/graphql/connection"
 import { InterceptorService } from "~/services/interceptor.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 
 const interceptorService = useService(InterceptorService)
 
-const props = defineProps<{
-  conn: GQLConnection
-}>()
+const connectionSwitchModal = ref(false)
 
-const connected = useReadonlyStream(props.conn.connected$, false)
-const isLoading = useReadonlyStream(props.conn.isLoading$, false)
-const headers = useReadonlyStream(gqlHeaders$, [])
-const auth = useReadonlyStream(gqlAuth$, {
-  authType: "none",
-  authActive: true,
+const connected = computed(() => connection.state === "CONNECTED")
+
+const url = computed({
+  get: () => currentActiveTab.value?.document.request.url ?? "",
+  set: (value) => {
+    currentActiveTab.value!.document.request.url = value
+  },
 })
 
-const url = useStream(gqlURL$, "", setGQLURL)
-
 const onConnectClick = () => {
   if (!connected.value) {
-    props.conn.connect(url.value, headers.value as any, auth.value)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_REQUEST_RUN",
-      platform: "graphql-schema",
-      strategy: interceptorService.currentInterceptorID.value!,
-    })
+    gqlConnect()
   } else {
-    props.conn.disconnect()
+    disconnect()
   }
 }
+
+const gqlConnect = () => {
+  connect(url.value, currentActiveTab.value?.document.request.headers)
+
+  platform.analytics?.logEvent({
+    type: "HOPP_REQUEST_RUN",
+    platform: "graphql-schema",
+    strategy: interceptorService.currentInterceptorID.value!,
+  })
+}
+
+const switchConnection = () => {
+  gqlConnect()
+  connectionSwitchModal.value = false
+}
+
+const lastTwoUrls = ref<string[]>([])
+
+watch(
+  currentActiveTab,
+  (newVal) => {
+    if (newVal) {
+      lastTwoUrls.value.push(newVal.document.request.url)
+      if (lastTwoUrls.value.length > 2) {
+        lastTwoUrls.value.shift()
+      }
+    }
+
+    if (
+      connected.value &&
+      lastTwoUrls.value.length === 2 &&
+      lastTwoUrls.value.at(0) !== lastTwoUrls.value.at(1)
+    ) {
+      disconnect()
+      connectionSwitchModal.value = true
+    }
+  },
+  {
+    immediate: true,
+  }
+)
+
+const cancelSwitch = () => {
+  if (connected.value) disconnect()
+  connectionSwitchModal.value = false
+}
 </script>