From 7ffd0f7490f50cdad567cd8a94022a64301ea626 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Wed, 5 Jun 2024 13:48:22 +0300
Subject: [PATCH] fix(fe2): using SSR apiOrigin instead of CSR apiOrigin in vue
 templates (#2326)

---
 .../components/auth/third-party/LoginBlock.vue         |  7 ++++++-
 .../components/developer-settings/SectionHeader.vue    |  8 +++++++-
 packages/frontend-2/composables/env.ts                 |  4 ++++
 packages/frontend-2/pages/developer-settings.vue       | 10 ++++++----
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-2/components/auth/third-party/LoginBlock.vue b/packages/frontend-2/components/auth/third-party/LoginBlock.vue
index 059e34acb..891b31004 100644
--- a/packages/frontend-2/components/auth/third-party/LoginBlock.vue
+++ b/packages/frontend-2/components/auth/third-party/LoginBlock.vue
@@ -5,7 +5,7 @@
         :is="getButtonComponent(strat)"
         v-for="strat in thirdPartyStrategies"
         :key="strat.id"
-        :to="buildAuthUrl(strat)"
+        to="javascript:;"
         @click="() => onClick(strat)"
       />
     </div>
@@ -93,10 +93,15 @@ const getButtonComponent = (strat: StrategyType) => {
 }
 
 const onClick = (strat: StrategyType) => {
+  if (!process.client) return
+
+  const redirectUrl = buildAuthUrl(strat)
   mixpanel.track('Log In', {
     isInvite: !!inviteToken.value,
     type: 'action',
     provider: strat.name
   })
+
+  window.location.href = redirectUrl
 }
 </script>
diff --git a/packages/frontend-2/components/developer-settings/SectionHeader.vue b/packages/frontend-2/components/developer-settings/SectionHeader.vue
index 4b15fae01..9ea40ef41 100644
--- a/packages/frontend-2/components/developer-settings/SectionHeader.vue
+++ b/packages/frontend-2/components/developer-settings/SectionHeader.vue
@@ -9,6 +9,7 @@
           :key="index"
           v-bind="button.props"
           class="shrink-0 whitespace-nowrap"
+          @click="($event) => button.onClick?.($event)"
         >
           {{ button.label }}
         </FormButton>
@@ -21,9 +22,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { FormButton } from '@speckle/ui-components'
+
+type FormButtonProps = InstanceType<typeof FormButton>['$props']
+
 interface Button {
   label: string
-  props: Record<string, unknown>
+  props: Record<string, unknown> & FormButtonProps
+  onClick?: (e: MouseEvent) => void
 }
 
 withDefaults(
diff --git a/packages/frontend-2/composables/env.ts b/packages/frontend-2/composables/env.ts
index be9d58829..87ead6dfa 100644
--- a/packages/frontend-2/composables/env.ts
+++ b/packages/frontend-2/composables/env.ts
@@ -1,3 +1,7 @@
+/**
+ * IMPORTANT: Don't use this directly in Vue templates that may render in SSR, cause this may cause the backend API origin to be rendered instead of the clientside one,
+ * at least until the app finishes hydrating. If people click on links based on this too early, they may end up in the wrong place.
+ */
 export const useApiOrigin = () => {
   const {
     public: { apiOrigin, backendApiOrigin }
diff --git a/packages/frontend-2/pages/developer-settings.vue b/packages/frontend-2/pages/developer-settings.vue
index 33bc7e65c..e6e760989 100644
--- a/packages/frontend-2/pages/developer-settings.vue
+++ b/packages/frontend-2/pages/developer-settings.vue
@@ -12,11 +12,10 @@
         :buttons="[
           {
             props: {
-              color: 'primary',
-              to: apiOrigin + '/explorer',
               target: '_blank',
               external: true
             },
+            onClick: goToExplorer,
             label: 'Explore GraphQL'
           }
         ]"
@@ -40,7 +39,6 @@
             },
             {
               props: {
-                color: 'primary',
                 iconLeft: PlusIcon,
                 onClick: openCreateTokenDialog
               },
@@ -120,7 +118,6 @@
             },
             {
               props: {
-                color: 'primary',
                 onClick: openCreateApplicationDialog,
                 iconLeft: PlusIcon
               },
@@ -376,4 +373,9 @@ const handleApplicationCreated = (applicationId: string) => {
     }
   })
 }
+
+const goToExplorer = () => {
+  if (!process.client) return
+  window.location.href = new URL('/explorer', apiOrigin).toString()
+}
 </script>