chore: extract kuma and me modules (#5094)

Extracts `kuma` and `me` modules to the main wiring root.

I also undid using the local `$.sources` token in some modules. Local
tokens are often mass exported and can therefore overwrite "global/app"
tokens if they are named the same.

`sources` usually use labels for registration anyway so we can just use
local "throwaway tokens" to register them.

---

Whilst doing this, I figured I could move our `htmlVars`
unit-test-only-injection and make the `testing` module generic enough to
be reused, which I then moved into `@/app/vue/testing.ts`

Signed-off-by: John Cowen <john.cowen@konghq.com>

Author: johncowen

packages/kuma-gui/src/app/application/index.ts

@@ -13,7 +13,6 @@ import { routes } from './routes'
 import I18n from './services/i18n/I18n'
 import storage from './services/storage'
 import { difference } from '@/app/application/polyfills/Set.prototype.difference'
-import { services as kuma } from '@/app/kuma'
 import type { ServiceDefinition } from '@kumahq/container'
 import type { Component } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
@@ -282,7 +281,6 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
         app.sources,
       ],
     }],
-    ...kuma(app),
   ]
 }
 export const TOKENS = $

packages/kuma-gui/src/app/control-planes/index.ts

@@ -11,13 +11,12 @@ import type { ServiceDefinition } from '@kumahq/container'
 type Token = ReturnType<typeof token>
 
 const $ = {
-  sources: token<ReturnType<typeof sources>>('control-planes.sources'),
   ControlPlaneStatus: token<typeof ControlPlaneStatus>('control-planes.components.ControlPlaneStatus'),
   ControlPlaneActionGroup: token<typeof ControlPlaneActionGroup>('control-planes.components.ControlPlaneActionGroup'),
 }
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
-    [$.sources, {
+    [token('control-planes.sources'), {
       service: sources,
       arguments: [
         app.env,

packages/kuma-gui/src/app/kuma/index.ts

@@ -12,7 +12,6 @@ import KumaTargetRef from '@/app/kuma/components/kuma-target-ref/KumaTargetRef.v
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
 import KumaApi from '@/app/kuma/services/kuma-api/KumaApi'
 import { RestClient } from '@/app/kuma/services/kuma-api/RestClient'
-import { services as me } from '@/app/me'
 import { useRouter } from '@/app/vue'
 import type { ServiceDefinition } from '@kumahq/container'
 
@@ -155,7 +154,6 @@ const protocolHandler = (can: Can) => {
 }
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
-    ...me(app),
     [token('kuma.plugins'), {
       service: (i18n, can) => {
         return [

packages/kuma-gui/src/app/me/index.ts

@@ -4,14 +4,10 @@ import { sources } from './sources'
 import type { ServiceDefinition } from '@kumahq/container'
 
 type Token = ReturnType<typeof token>
-type Sources = ReturnType<typeof sources>
 
-const $ = {
-  sources: token<Sources>('me.sources'),
-}
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
-    [$.sources, {
+    [token('me.sources'), {
       service: sources,
       arguments: [
         app.storage,
@@ -22,4 +18,3 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     }],
   ]
 }
-export const TOKENS = $

packages/kuma-gui/test-support/index.ts packages/kuma-gui/src/app/vue/testing.tspackages/kuma-gui/test-support/index.ts renamed to packages/kuma-gui/src/app/vue/testing.ts

@@ -1,4 +1,3 @@
-import { defaultKumaHtmlVars as htmlVars } from '@kumahq/config/vite'
 import { config } from '@vue/test-utils'
 
 import type { PluginDefinition, ComponentDefinition } from '@/app/vue'
@@ -28,7 +27,4 @@ export const services: ServiceConfigurator = (app) => [
       app.plugins,
     ],
   }],
-  [app.htmlVars, {
-    service: () => htmlVars,
-  }],
 ]

packages/kuma-gui/src/main.ts

@@ -11,8 +11,9 @@ import { services as dataplanes } from '@/app/data-planes'
 import { services as externalServices } from '@/app/external-services'
 import { services as gateways } from '@/app/gateways'
 import { services as hostnameGenerators } from '@/app/hostname-generators'
-import { TOKENS } from '@/app/kuma'
+import { services as kuma, TOKENS as KUMA } from '@/app/kuma'
 import { services as legacyDataplanes } from '@/app/legacy-data-planes'
+import { services as me } from '@/app/me'
 import { services as meshIdentities } from '@/app/mesh-identities'
 import { services as meshTrusts } from '@/app/mesh-trusts'
 import { services as meshes } from '@/app/meshes'
@@ -28,13 +29,16 @@ async function mountVueApplication() {
   const $ = {
     ...VUE,
     ...APPLICATION,
-    ...TOKENS,
+    ...KUMA,
   }
 
   const get = build(
     vue($),
     application($),
+    me($),
     //
+    kuma($),
+
     configuration($),
     controlPlanes($),
     zones($),

packages/kuma-gui/test-support/main.ts

@@ -2,24 +2,33 @@
 // When running via vitest this file is added first using
 // vitest's `setupFiles` property, please see `/vite.config.production.ts`
 
+import { defaultKumaHtmlVars as htmlVars } from '@kumahq/config/vite'
 import { get, container, build } from '@kumahq/container'
 import { beforeEach, afterEach } from 'vitest'
 
-import { services as testing } from './index'
 import { services as application, TOKENS as APPLICATION } from '@/app/application'
-import { TOKENS } from '@/app/kuma'
+import { services as kuma, TOKENS as KUMA } from '@/app/kuma'
 import { services as vue, TOKENS as VUE } from '@/app/vue'
-
-;(async () => {
+import { services as testing } from '@/app/vue/testing'
+(async () => {
   const $ = {
     ...VUE,
     ...APPLICATION,
-    ...TOKENS,
+    ...KUMA,
   }
   build(
     application($),
     vue($),
     testing($),
+    //
+    kuma($),
+    // during testing we don't have access to the index.html vars
+    // so we inject them here so they are available during unit testing
+    [
+      [$.htmlVars, {
+        service: () => htmlVars,
+      }],
+    ],
   )
   // initializes vue-test-utils with any global components and/or plugins etc
   get($.app)