154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<template>
|
|
<div
|
|
class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
|
|
>
|
|
<div class="inline-flex flex-1 space-x-2">
|
|
<input
|
|
id="url"
|
|
v-model="url"
|
|
type="url"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
|
|
:placeholder="`${t('graphql.url_placeholder')}`"
|
|
:disabled="connected"
|
|
@keyup.enter="onConnectClick"
|
|
/>
|
|
<HoppButtonPrimary
|
|
id="get"
|
|
name="get"
|
|
: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 { useI18n } from "@composables/i18n"
|
|
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"
|
|
import { defineActionHandler } from "~/helpers/actions"
|
|
import { GQLTabService } from "~/services/tab/graphql"
|
|
|
|
const t = useI18n()
|
|
const tabs = useService(GQLTabService)
|
|
|
|
const interceptorService = useService(InterceptorService)
|
|
|
|
const connectionSwitchModal = ref(false)
|
|
|
|
const connected = computed(() => connection.state === "CONNECTED")
|
|
|
|
const url = computed({
|
|
get: () => tabs.currentActiveTab.value?.document.request.url ?? "",
|
|
set: (value) => {
|
|
tabs.currentActiveTab.value!.document.request.url = value
|
|
},
|
|
})
|
|
|
|
const onConnectClick = () => {
|
|
if (!connected.value) {
|
|
gqlConnect()
|
|
} else {
|
|
disconnect()
|
|
}
|
|
}
|
|
|
|
const gqlConnect = () => {
|
|
connect(url.value, tabs.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(
|
|
tabs.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
|
|
}
|
|
|
|
defineActionHandler(
|
|
"gql.connect",
|
|
gqlConnect,
|
|
computed(() => !connected.value)
|
|
)
|
|
|
|
defineActionHandler("gql.disconnect", disconnect, connected)
|
|
</script>
|