From 39937d177f719f8d98fc3539cbf7939492b873ce Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 3 Apr 2026 13:57:37 +0200
Subject: [PATCH] refactor(webui): migrate globalProperties to provide/inject

Replace Vue 2-style app.config.globalProperties with Vue 3
provide/inject using typed InjectionKeys. Create useConfiguration
and useTemplates composables. Remove dead globalProperties
fallback paths and refreshChargingStations no-op. Update test
mounts to use provide. Clean ComponentCustomProperties from
shims-vue.d.ts.
---
 .../actions/AddChargingStations.vue           | 32 +++++-----
 .../components/actions/SetSupervisionUrl.vue  | 15 +++--
 .../components/actions/StartTransaction.vue   |  9 +--
 ui/web/src/composables/Utils.ts               | 35 +++++++---
 ui/web/src/composables/index.ts               |  7 +-
 ui/web/src/main.ts                            | 32 ++++++----
 ui/web/src/shims-vue.d.ts                     |  6 --
 ui/web/src/views/ChargingStationsView.vue     | 64 ++++++++-----------
 ui/web/tests/unit/AddChargingStations.test.ts |  7 +-
 .../tests/unit/ChargingStationsView.test.ts   | 18 ++++--
 ui/web/tests/unit/SetSupervisionUrl.test.ts   |  5 +-
 11 files changed, 123 insertions(+), 107 deletions(-)

diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index 83de8529..d756ef3c 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -14,8 +14,8 @@
       Please select a template
     </option>
     <option
-      v-for="template in $templates!.value"
-      v-show="Array.isArray($templates?.value) && $templates.value.length > 0"
+      v-for="template in $templates"
+      v-show="Array.isArray($templates) && $templates.length > 0"
       :key="template"
     >
       {{ template }}
@@ -87,7 +87,7 @@
     @click="
       () => {
         $uiClient
-          ?.addChargingStations(state.template, state.numberOfStations, {
+          .addChargingStations(state.template, state.numberOfStations, {
             supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
             autoStart: convertToBoolean(state.autoStart),
             persistentConfiguration: convertToBoolean(state.persistentConfiguration),
@@ -96,16 +96,15 @@
           })
           .then(() => {
             $toast.success('Charging stations successfully added')
-            return refreshChargingStations()
-          })
-          .catch((error: Error) => {
-            $toast.error('Error at adding charging stations')
-            console.error('Error at adding charging stations:', error)
           })
           .finally(() => {
             resetToggleButtonState('add-charging-stations', true)
             $router.push({ name: 'charging-stations' })
           })
+          .catch((error: Error) => {
+            $toast.error('Error at adding charging stations')
+            console.error('Error at adding charging stations:', error)
+          })
       }
     "
   >
@@ -114,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 import type { UUIDv4 } from '@/types'
 
@@ -122,8 +121,9 @@ import Button from '@/components/buttons/Button.vue'
 import {
   convertToBoolean,
   randomUUID,
-  refreshChargingStations,
   resetToggleButtonState,
+  useTemplates,
+  useUIClient,
 } from '@/composables'
 
 const state = ref<{
@@ -146,14 +146,12 @@ const state = ref<{
   template: '',
 })
 
-const app = getCurrentInstance()
+const $uiClient = useUIClient()
+const $templates = useTemplates()
 
-const templates = app?.appContext.config.globalProperties.$templates
-if (templates != null) {
-  watch(templates, () => {
-    state.value.renderTemplates = randomUUID()
-  })
-}
+watch($templates, () => {
+  state.value.renderTemplates = randomUUID()
+})
 </script>
 
 <style scoped>
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index 6406467f..045ccc74 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -18,19 +18,18 @@
     @click="
       () => {
         $uiClient
-          ?.setSupervisionUrl(hashId, state.supervisionUrl)
+          .setSupervisionUrl(hashId, state.supervisionUrl)
           .then(() => {
             $toast.success('Supervision url successfully set')
-            return refreshChargingStations()
-          })
-          .catch((error: Error) => {
-            $toast.error('Error at setting supervision url')
-            console.error('Error at setting supervision url:', error)
           })
           .finally(() => {
             resetToggleButtonState(`${props.hashId}-set-supervision-url`, true)
             $router.push({ name: 'charging-stations' })
           })
+          .catch((error: Error) => {
+            $toast.error('Error at setting supervision url')
+            console.error('Error at setting supervision url:', error)
+          })
       }
     "
   >
@@ -42,7 +41,7 @@
 import { ref } from 'vue'
 
 import Button from '@/components/buttons/Button.vue'
-import { refreshChargingStations, resetToggleButtonState } from '@/composables'
+import { resetToggleButtonState, useUIClient } from '@/composables'
 
 const props = defineProps<{
   chargingStationId: string
@@ -52,6 +51,8 @@ const props = defineProps<{
 const state = ref<{ supervisionUrl: string }>({
   supervisionUrl: '',
 })
+
+const $uiClient = useUIClient()
 </script>
 
 <style scoped>
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index abfe0fe4..9365d72d 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -42,13 +42,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'vue-toast-notification'
 
 import Button from '@/components/buttons/Button.vue'
-import {
-  convertToInt,
-  refreshChargingStations,
-  resetToggleButtonState,
-  UIClient,
-  useUIClient,
-} from '@/composables'
+import { convertToInt, resetToggleButtonState, UIClient, useUIClient } from '@/composables'
 import { type OCPPVersion } from '@/types'
 
 const props = defineProps<{
@@ -105,7 +99,6 @@ const handleStartTransaction = async (): Promise<void> => {
       ocppVersion: ocppVersion.value,
     })
     $toast.success('Transaction successfully started')
-    await refreshChargingStations()
   } catch (error) {
     $toast.error('Error at starting transaction')
     console.error('Error at starting transaction:', error)
diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index c5531ded..fbc71980 100644
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -1,12 +1,18 @@
-import type { Ref } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 
-import { getCurrentInstance } from 'vue'
+import { inject } from 'vue'
 import { useToast } from 'vue-toast-notification'
 
-import type { ChargingStationData, UUIDv4 } from '@/types'
+import type { ChargingStationData, ConfigurationData, UUIDv4 } from '@/types'
 
 import { UIClient } from './UIClient'
 
+export const configurationKey: InjectionKey<Ref<ConfigurationData>> = Symbol('configuration')
+export const chargingStationsKey: InjectionKey<Ref<ChargingStationData[]>> =
+  Symbol('chargingStations')
+export const templatesKey: InjectionKey<Ref<string[]>> = Symbol('templates')
+export const uiClientKey: InjectionKey<UIClient> = Symbol('uiClient')
+
 export const convertToBoolean = (value: unknown): boolean => {
   let result = false
   if (value != null) {
@@ -86,18 +92,27 @@ export const validateUUID = (uuid: unknown): uuid is UUIDv4 => {
 }
 
 export const useUIClient = (): UIClient => {
+  const injected = inject(uiClientKey, undefined)
+  if (injected != null) return injected
   return UIClient.getInstance()
 }
 
-export const useChargingStations = (): Ref<ChargingStationData[]> | undefined => {
-  return getCurrentInstance()?.appContext.config.globalProperties.$chargingStations
+export const useConfiguration = (): Ref<ConfigurationData> => {
+  const injected = inject(configurationKey, undefined)
+  if (injected != null) return injected
+  throw new Error('configuration not provided')
+}
+
+export const useChargingStations = (): Ref<ChargingStationData[]> => {
+  const injected = inject(chargingStationsKey, undefined)
+  if (injected != null) return injected
+  throw new Error('chargingStations not provided')
 }
 
-export const refreshChargingStations = async (): Promise<void> => {
-  const $chargingStations = useChargingStations()
-  if ($chargingStations == null) return
-  const response = await useUIClient().listChargingStations()
-  $chargingStations.value = response.chargingStations as ChargingStationData[]
+export const useTemplates = (): Ref<string[]> => {
+  const injected = inject(templatesKey, undefined)
+  if (injected != null) return injected
+  throw new Error('templates not provided')
 }
 
 export const useExecuteAction = (emit: (event: 'need-refresh') => void) => {
diff --git a/ui/web/src/composables/index.ts b/ui/web/src/composables/index.ts
index 8b8fb6ef..d7cf7eff 100644
--- a/ui/web/src/composables/index.ts
+++ b/ui/web/src/composables/index.ts
@@ -1,15 +1,20 @@
 export { UIClient } from './UIClient'
 export {
+  chargingStationsKey,
+  configurationKey,
   convertToBoolean,
   convertToInt,
   deleteFromLocalStorage,
   getFromLocalStorage,
   getLocalStorage,
   randomUUID,
-  refreshChargingStations,
   resetToggleButtonState,
   setToLocalStorage,
+  templatesKey,
+  uiClientKey,
   useChargingStations,
+  useConfiguration,
   useExecuteAction,
+  useTemplates,
   useUIClient,
 } from './Utils'
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index ea0c198f..d9fcfc9b 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -4,7 +4,15 @@ import ToastPlugin from 'vue-toast-notification'
 import type { ChargingStationData, ConfigurationData, UIServerConfigurationSection } from '@/types'
 
 import App from '@/App.vue'
-import { getFromLocalStorage, setToLocalStorage, UIClient } from '@/composables'
+import {
+  chargingStationsKey,
+  configurationKey,
+  getFromLocalStorage,
+  setToLocalStorage,
+  templatesKey,
+  UIClient,
+  uiClientKey,
+} from '@/composables'
 import { router } from '@/router'
 
 import 'vue-toast-notification/dist/theme-bootstrap.css'
@@ -33,27 +41,25 @@ const initializeApp = async (app: AppType, config: ConfigurationData): Promise<v
   if (!Array.isArray(config.uiServer)) {
     config.uiServer = [config.uiServer]
   }
-  app.config.globalProperties.$configuration ??= ref(config)
-  if (!Array.isArray(app.config.globalProperties.$templates?.value)) {
-    app.config.globalProperties.$templates = ref<string[]>([])
-  }
-  if (!Array.isArray(app.config.globalProperties.$chargingStations?.value)) {
-    app.config.globalProperties.$chargingStations = ref<ChargingStationData[]>([])
-  }
+  const configuration = ref(config)
+  const templates = ref<string[]>([])
+  const chargingStations = ref<ChargingStationData[]>([])
   if (
     getFromLocalStorage<number | undefined>('uiServerConfigurationIndex', undefined) == null ||
     getFromLocalStorage('uiServerConfigurationIndex', 0) >
-      (app.config.globalProperties.$configuration.value.uiServer as UIServerConfigurationSection[])
-        .length -
-        1
+      (configuration.value.uiServer as UIServerConfigurationSection[]).length - 1
   ) {
     setToLocalStorage('uiServerConfigurationIndex', 0)
   }
-  app.config.globalProperties.$uiClient ??= UIClient.getInstance(
-    (app.config.globalProperties.$configuration.value.uiServer as UIServerConfigurationSection[])[
+  const uiClient = UIClient.getInstance(
+    (configuration.value.uiServer as UIServerConfigurationSection[])[
       getFromLocalStorage('uiServerConfigurationIndex', 0)
     ]
   )
+  app.provide(configurationKey, configuration)
+  app.provide(chargingStationsKey, chargingStations)
+  app.provide(templatesKey, templates)
+  app.provide(uiClientKey, uiClient)
   app.use(router).use(ToastPlugin).mount('#app')
 }
 
diff --git a/ui/web/src/shims-vue.d.ts b/ui/web/src/shims-vue.d.ts
index 13685ebb..10ff1ef1 100644
--- a/ui/web/src/shims-vue.d.ts
+++ b/ui/web/src/shims-vue.d.ts
@@ -5,10 +5,4 @@ declare module 'vue' {
     RouterLink: (typeof import('vue-router'))['RouterLink']
     RouterView: (typeof import('vue-router'))['RouterView']
   }
-  interface ComponentCustomProperties {
-    $chargingStations: import('vue').Ref<import('@/types').ChargingStationData[]> | undefined
-    $configuration: import('vue').Ref<import('@/types').ConfigurationData> | undefined
-    $templates: import('vue').Ref<string[]> | undefined
-    $uiClient: import('@/composables').UIClient | undefined
-  }
 }
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 38652543..a50a6793 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -15,13 +15,11 @@
               if (
                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
               ) {
-                $uiClient?.setConfiguration(
-                  ($configuration!.value.uiServer as UIServerConfigurationSection[])[
-                    state.uiServerIndex
-                  ]
+                $uiClient.setConfiguration(
+                  ($configuration.uiServer as UIServerConfigurationSection[])[state.uiServerIndex]
                 )
                 registerWSEventListeners()
-                $uiClient?.registerWSEventListener(
+                $uiClient.registerWSEventListener(
                   'open',
                   () => {
                     setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
@@ -32,15 +30,15 @@
                   },
                   { once: true }
                 )
-                $uiClient?.registerWSEventListener(
+                $uiClient.registerWSEventListener(
                   'error',
                   () => {
                     state.uiServerIndex = getFromLocalStorage<number>(
                       'uiServerConfigurationIndex',
                       0
                     )
-                    $uiClient?.setConfiguration(
-                      ($configuration!.value.uiServer as UIServerConfigurationSection[])[
+                    $uiClient.setConfiguration(
+                      ($configuration.uiServer as UIServerConfigurationSection[])[
                         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
                       ]
                     )
@@ -99,9 +97,9 @@
       />
     </Container>
     <CSTable
-      v-show="Array.isArray($chargingStations?.value) && $chargingStations.value.length > 0"
+      v-show="Array.isArray($chargingStations) && $chargingStations.length > 0"
       :key="state.renderChargingStations"
-      :charging-stations="$chargingStations!.value"
+      :charging-stations="$chargingStations"
       @need-refresh="
         () => {
           getChargingStations()
@@ -114,7 +112,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useToast } from 'vue-toast-notification'
 
 import type {
@@ -137,6 +135,8 @@ import {
   randomUUID,
   setToLocalStorage,
   useChargingStations,
+  useConfiguration,
+  useTemplates,
   useUIClient,
 } from '@/composables'
 
@@ -178,25 +178,20 @@ const clearToggleButtons = (): void => {
   }
 }
 
-const app = getCurrentInstance()
+const $configuration = useConfiguration()
+const $templates = useTemplates()
+const $chargingStations = useChargingStations()
 
-const chargingStationsRef = useChargingStations()
-if (chargingStationsRef != null) {
-  watch(chargingStationsRef, () => {
-    state.value.renderChargingStations = randomUUID()
-  })
-}
+watch($chargingStations, () => {
+  state.value.renderChargingStations = randomUUID()
+})
 
 const clearTemplates = (): void => {
-  if (app != null) {
-    app.appContext.config.globalProperties.$templates!.value = []
-  }
+  $templates.value = []
 }
 
 const clearChargingStations = (): void => {
-  if (chargingStationsRef != null) {
-    chargingStationsRef.value = []
-  }
+  $chargingStations.value = []
 }
 
 const $uiClient = useUIClient()
@@ -228,9 +223,7 @@ const getTemplates = (): void => {
     $uiClient
       .listTemplates()
       .then((response: ResponsePayload) => {
-        if (app != null) {
-          app.appContext.config.globalProperties.$templates!.value = response.templates as string[]
-        }
+        $templates.value = response.templates as string[]
         return undefined
       })
       .finally(() => {
@@ -250,9 +243,7 @@ const getChargingStations = (): void => {
     $uiClient
       .listChargingStations()
       .then((response: ResponsePayload) => {
-        if (chargingStationsRef != null) {
-          chargingStationsRef.value = response.chargingStations as ChargingStationData[]
-        }
+        $chargingStations.value = response.chargingStations as ChargingStationData[]
         return undefined
       })
       .finally(() => {
@@ -301,13 +292,12 @@ onUnmounted(() => {
 const uiServerConfigurations: {
   configuration: UIServerConfigurationSection
   index: number
-}[] = (
-  app!.appContext.config.globalProperties.$configuration!.value
-    .uiServer as UIServerConfigurationSection[]
-).map((configuration: UIServerConfigurationSection, index: number) => ({
-  configuration,
-  index,
-}))
+}[] = ($configuration.value.uiServer as UIServerConfigurationSection[]).map(
+  (configuration: UIServerConfigurationSection, index: number) => ({
+    configuration,
+    index,
+  })
+)
 
 const startSimulator = (): void => {
   $uiClient
diff --git a/ui/web/tests/unit/AddChargingStations.test.ts b/ui/web/tests/unit/AddChargingStations.test.ts
index 4a7d0d20..4d6b88cb 100644
--- a/ui/web/tests/unit/AddChargingStations.test.ts
+++ b/ui/web/tests/unit/AddChargingStations.test.ts
@@ -7,6 +7,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import AddChargingStations from '@/components/actions/AddChargingStations.vue'
+import { templatesKey, uiClientKey } from '@/composables'
 
 import { toastMock } from '../setup'
 import { ButtonStub, createMockUIClient, type MockUIClient } from './helpers'
@@ -27,11 +28,13 @@ describe('AddChargingStations', () => {
         config: {
           globalProperties: {
             $router: mockRouter,
-            $templates: ref(['template-A.json', 'template-B.json']),
             $toast: toastMock,
-            $uiClient: mockClient,
           } as never,
         },
+        provide: {
+          [templatesKey as symbol]: ref(['template-A.json', 'template-B.json']),
+          [uiClientKey as symbol]: mockClient,
+        },
         stubs: {
           Button: ButtonStub,
         },
diff --git a/ui/web/tests/unit/ChargingStationsView.test.ts b/ui/web/tests/unit/ChargingStationsView.test.ts
index 50e411e8..10c573b3 100644
--- a/ui/web/tests/unit/ChargingStationsView.test.ts
+++ b/ui/web/tests/unit/ChargingStationsView.test.ts
@@ -9,7 +9,13 @@ import { ref } from 'vue'
 
 import type { UIClient } from '@/composables'
 
-import { useUIClient } from '@/composables'
+import {
+  chargingStationsKey,
+  configurationKey,
+  templatesKey,
+  uiClientKey,
+  useUIClient,
+} from '@/composables'
 import { ResponseStatus } from '@/types'
 import ChargingStationsView from '@/views/ChargingStationsView.vue'
 
@@ -77,14 +83,16 @@ function mountView (
     global: {
       config: {
         globalProperties: {
-          $chargingStations: ref(chargingStations),
-          $configuration: ref(configuration),
           $route: { name: 'charging-stations', params: {}, query: {} },
           $router: { back: vi.fn(), push: vi.fn(), replace: vi.fn() },
-          $templates: ref(templates),
-          $uiClient: mockClient,
         } as never,
       },
+      provide: {
+        [chargingStationsKey as symbol]: ref(chargingStations),
+        [configurationKey as symbol]: ref(configuration),
+        [templatesKey as symbol]: ref(templates),
+        [uiClientKey as symbol]: mockClient,
+      },
       stubs: {
         Container: { name: 'Container', template: '<div><slot /></div>' },
         CSTable: true,
diff --git a/ui/web/tests/unit/SetSupervisionUrl.test.ts b/ui/web/tests/unit/SetSupervisionUrl.test.ts
index b8bd56a6..273e08cb 100644
--- a/ui/web/tests/unit/SetSupervisionUrl.test.ts
+++ b/ui/web/tests/unit/SetSupervisionUrl.test.ts
@@ -6,6 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
 import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
+import { uiClientKey } from '@/composables'
 
 import { toastMock } from '../setup'
 import { TEST_HASH_ID, TEST_STATION_ID } from './constants'
@@ -29,9 +30,11 @@ describe('SetSupervisionUrl', () => {
           globalProperties: {
             $router: mockRouter,
             $toast: toastMock,
-            $uiClient: mockClient,
           } as never,
         },
+        provide: {
+          [uiClientKey as symbol]: mockClient,
+        },
         stubs: {
           Button: ButtonStub,
         },
-- 
2.53.0