From 88a9848436e4688e33acf383f49b60b21963fd71 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Tue, 2 Jan 2024 11:13:22 +0100
Subject: [PATCH] feat: graphql playground

---
 packages/app/components/AppNav.vue          |  2 +-
 packages/app/components/IframeKeepAlive.vue | 73 +++++++++++++++++++++
 packages/app/pages/graphql.vue              | 10 +++
 packages/app/pages/graphql/playground.vue   | 24 ++++++-
 packages/app/utils/route.ts                 |  6 ++
 5 files changed, 112 insertions(+), 3 deletions(-)
 create mode 100644 packages/app/components/IframeKeepAlive.vue
diff --git a/packages/app/components/AppNav.vue b/packages/app/components/AppNav.vue
index 3dfa956..51c936b 100644
--- a/packages/app/components/AppNav.vue
+++ b/packages/app/components/AppNav.vue
@@ -95,7 +95,7 @@ const colorMode = useColorMode()
 
     <AppNavItem
       v-if="hasGraphQL"
-      to="/graphql/schema"
+      to="/graphql"
       active-route="/graphql"
       icon="i-mdi-graphql"
       title="GraphQL"
diff --git a/packages/app/components/IframeKeepAlive.vue b/packages/app/components/IframeKeepAlive.vue
new file mode 100644
index 0000000..2751d69
--- /dev/null
+++ b/packages/app/components/IframeKeepAlive.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
+</script>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  id: string
+  src: string
+  class?: any
+  iframeClass?: any
+}>()
+
+const attrs = useAttrs()
+
+const wrapper = ref<HTMLDivElement>()
+
+const iframe = shallowRef<HTMLIFrameElement | undefined>()
+
+const bounds = useElementBounding(wrapper)
+
+watchEffect(() => {
+  if (iframe.value) {
+    iframe.value.style.top = `${bounds.top.value}px`
+    iframe.value.style.left = `${bounds.left.value}px`
+    iframe.value.style.width = `${bounds.width.value}px`
+    iframe.value.style.height = `${bounds.height.value}px`
+  }
+})
+
+onMounted(() => {
+  const saved = iframes.get(props.id)
+  iframe.value = saved?.iframe
+  if (!iframe.value) {
+    iframe.value = document.createElement('iframe')
+    iframe.value.style.position = 'fixed'
+    iframe.value.src = props.src
+    iframe.value.classList.add('w-full', 'h-full', 'border-0')
+
+    if (props.iframeClass) {
+      if (typeof props.iframeClass === 'string') {
+        iframe.value.classList.add(...props.iframeClass.split(/\s+/))
+      }
+      else {
+        iframe.value.classList.add(...props.iframeClass)
+      }
+    }
+
+    for (const [key, value] of Object.entries(attrs)) {
+      iframe.value.setAttribute(key, String(value))
+    }
+    iframes.set(props.id, { iframe: iframe.value, src: props.src })
+    document.body.appendChild(iframe.value)
+  }
+  else if (props.src !== saved?.src) {
+    iframe.value.src = props.src
+  }
+  iframe.value.style.display = 'block'
+})
+
+onBeforeUnmount(() => {
+  if (iframe.value) {
+    iframe.value.style.display = 'none'
+  }
+})
+</script>
+
+<template>
+  <div ref="wrapper" :class="props.class" />
+</template>
diff --git a/packages/app/pages/graphql.vue b/packages/app/pages/graphql.vue
index e83392f..cf2c978 100644
--- a/packages/app/pages/graphql.vue
+++ b/packages/app/pages/graphql.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+useSaveRoute({
+  key: 'graphql.lastRoute',
+  basePath: '/graphql',
+  defaultRoute: {
+    name: 'graphql-schema',
+  },
+})
+</script>
+
 <template>
   <div class="flex divide-x divide-gray-300 dark:divide-gray-700">
     <Head>
diff --git a/packages/app/pages/graphql/playground.vue b/packages/app/pages/graphql/playground.vue
index 26b9380..867d91a 100644
--- a/packages/app/pages/graphql/playground.vue
+++ b/packages/app/pages/graphql/playground.vue
@@ -1,5 +1,25 @@
+<script setup lang="ts">
+const { data, refresh } = await useFetch('/api/server')
+onWindowFocus(refresh)
+
+const graphqlServer = computed(() => data.value?.routeInfos.find(item => item.type === 'graphql'))
+</script>
+
 <template>
-  <div class="flex">
-    <UIcon name="i-ph-traffic-cone" class="w-12 h-12 m-auto opacity-30" />
+  <div v-if="!graphqlServer" class="flex">
+    <UIcon name="i-ph-activity" class="w-8 h-8 m-auto text-gray-500" />
+  </div>
+
+  <div
+    v-else
+    class="flex"
+  >
+    <IframeKeepAlive
+      id="graphql-playground"
+      :src="graphqlServer.url"
+      frameborder="0"
+      class="flex-1 m-2 shadow-md"
+      iframe-class="rounded-lg overflow-hidden"
+    />
   </div>
 </template>
diff --git a/packages/app/utils/route.ts b/packages/app/utils/route.ts
index dccabdb..beb74d9 100644
--- a/packages/app/utils/route.ts
+++ b/packages/app/utils/route.ts
@@ -13,7 +13,13 @@ let lastRoute: SavedRoute | null = null
 
 export interface UseSaveRouteOptions {
   key: string
+  /**
+   * Path used by the menu link to detect if we need to restore the saved route.
+   */
   basePath: string
+  /**
+   * Default route to use if the saved route is not found.
+   */
   defaultRoute?: {
     name: RouteRecordName
     params?: RouteParams
