[openMFP] Move luigiContext and isInIframe to own composables

frontend/src/App.vue

@@ -34,8 +34,6 @@ import { useProjectStore } from '@/store/project'
 
 import { useCustomColors } from '@/composables/useCustomColors'
 
-import { useOpenMFP } from './composables/useOpenMFP'
-
 import get from 'lodash/get'
 
 const theme = useTheme()
@@ -47,9 +45,6 @@ const loginStore = useLoginStore()
 const shootStore = useShootStore()
 const projectStore = useProjectStore()
 const logger = inject('logger')
-const openMFP = useOpenMFP()
-
-openMFP.setRoute(route)
 
 async function setCustomColors () {
   try {

frontend/src/composables/useOpenMFP.js

@@ -4,28 +4,43 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+import { useRoute } from 'vue-router'
+import {
+  until,
+  createGlobalState,
+} from '@vueuse/core'
+import LuigiClient from '@luigi-project/client'
 import {
   computed,
   ref,
   toRef,
   watch,
 } from 'vue'
-import { createGlobalState } from '@vueuse/core'
-import LuigiClient from '@luigi-project/client'
 
 import { useLogger } from '@/composables/useLogger'
 import { useIsInIframe } from '@/composables/useIsInIframe'
 
-export const useOpenMFP = createGlobalState(() => {
-  const logger = useLogger()
-  const isInIframe = useIsInIframe()
+export const useOpenMFP = createGlobalState((options = {}) => {
+  const {
+    logger = useLogger(),
+    isInIframe = useIsInIframe(),
+    route = useRoute(),
+  } = options
 
   const luigiContext = ref(null)
 
   if (isInIframe.value) {
     logger.debug('Registering listener for Luigi context initialization and context updates')
     LuigiClient.addInitListener(context => setLuigiContext(context))
     LuigiClient.addContextUpdateListener(context => setLuigiContext(context))
+    const pathname = toRef(route, 'path')
+    watch(pathname, value => {
+      if (value) {
+        LuigiClient.linkManager().fromVirtualTreeRoot().withoutSync().navigate(value)
+      }
+    }, {
+      immediate: true,
+    })
   }
 
   function setLuigiContext (value) {
@@ -34,49 +49,29 @@ export const useOpenMFP = createGlobalState(() => {
 
   const accountId = computed(() => luigiContext.value?.accountId)
 
-  function getLuigiContext () {
+  async function getLuigiContext () {
     if (!isInIframe.value) {
-      return Promise.resolve(null)
+      return null
     }
     if (luigiContext.value !== null) {
-      return Promise.resolve(luigiContext.value)
+      return luigiContext.value
     }
-    return new Promise(resolve => {
-      const timeout = 3000
-      const timeoutId = setTimeout(() => {
-        unwatch()
-        logger.error('The initialization of the Luigi Client has timed out after %d milliseconds', timeout)
-        resolve(null)
-      }, timeout)
-      const unwatch = watch(luigiContext, context => {
-        if (context !== null) {
-          clearTimeout(timeoutId)
-          unwatch()
-          resolve(context)
-        }
-      }, {
-        immediate: true,
-      })
-    })
-  }
-
-  function setRoute (route) {
-    if (isInIframe.value) {
-      const pathname = toRef(route, 'path')
-      watch(pathname, value => {
-        if (value) {
-          LuigiClient.linkManager().fromVirtualTreeRoot().withoutSync().navigate(value)
-        }
-      }, {
-        immediate: true,
+    const timeout = 3000
+    try {
+      await until(luigiContext).toBeTruthy({
+        timeout: 1000,
+        throwOnTimeout: true,
       })
+      return luigiContext.value
+    } catch (err) {
+      logger.error('The initialization of the Luigi Client has timed out after %d milliseconds', timeout)
+      return null
     }
   }
 
   return {
     accountId,
     luigiContext,
-    setRoute,
     getLuigiContext,
   }
 })

frontend/src/router/guards.js

@@ -25,7 +25,6 @@ import { useApi } from '@/composables/useApi'
 export function createGlobalBeforeGuards () {
   const logger = useLogger()
   const api = useApi()
-  const openMFP = useOpenMFP()
   const appStore = useAppStore()
   const authnStore = useAuthnStore()
   const configStore = useConfigStore()
@@ -52,6 +51,7 @@ export function createGlobalBeforeGuards () {
         return true
       }
 
+      const openMFP = useOpenMFP()
       const context = await openMFP.getLuigiContext()
       if (context) {
         logger.debug('Luigi context:', context)