@skyhook-io/k8s-ui 1.10.3 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/topology/layout.worker.ts

@@ -7,10 +7,11 @@
  */
 import ELK from 'elkjs/lib/elk-api.js'
 import elkWorkerAlgorithm from 'elkjs/lib/elk-worker.min.js?url'
+import { assetUrl } from '../../utils/asset-url'
 
 // Create ELK with explicit worker URL (runs the algorithm in our worker context)
 const elk = new ELK({
-  workerUrl: elkWorkerAlgorithm,
+  workerUrl: assetUrl(elkWorkerAlgorithm),
 })
 
 // ELK options for laying out nodes within a single group

package/src/types/core.ts

@@ -92,6 +92,21 @@ export interface Capabilities {
   resources?: ResourcePermissions // Per-resource-type permissions
   authEnabled?: boolean   // Auth is enabled on the backend
   username?: string       // Authenticated user's username (when auth enabled)
+  // Which Cloud-connect lane this deployment gets. Optional on the wire:
+  // older backends don't advertise it — consumers fall back to wizard links.
+  cloudConnect?: CloudConnectCapability
+}
+
+// CloudConnectCapability picks the Cloud funnel's connect lane: 'driver'
+// means the in-product connect flow can run on this server (local, no auth,
+// no existing tunnel); 'wizard' routes to the Hub's connect wizard at appUrl.
+export interface CloudConnectCapability {
+  lane: 'driver' | 'wizard'
+  appUrl: string
+  // Hub API origin the connect dialog reads its live copy from. Absent means
+  // the server decided this deployment must not fetch — consumers render their
+  // compiled-in copy instead.
+  apiUrl?: string
 }
 
 export interface FeatureCapabilities {

package/src/utils/asset-url.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { assetUrl } from './asset-url'
+
+type RuntimeGlobal = typeof globalThis & {
+  __RADAR_RUNTIME_CONFIG__?: { assetBase?: string }
+}
+
+function setAssetBase(assetBase: string) {
+  ;(globalThis as RuntimeGlobal).__RADAR_RUNTIME_CONFIG__ = { assetBase }
+}
+
+/**
+ * Simulates a Worker scope, where `window` is absent and `location` is the
+ * worker script's own URL. jsdom defines `window`, so it has to be removed.
+ */
+function asWorkerAt(pathname: string, run: () => void) {
+  const realWindow = globalThis.window
+  // @ts-expect-error — deliberately emulating a scope without `window`
+  delete globalThis.window
+  const realLocation = globalThis.location
+  Object.defineProperty(globalThis, 'location', {
+    value: { pathname },
+    configurable: true,
+    writable: true,
+  })
+  try {
+    run()
+  } finally {
+    Object.defineProperty(globalThis, 'location', {
+      value: realLocation,
+      configurable: true,
+      writable: true,
+    })
+    globalThis.window = realWindow
+  }
+}
+
+afterEach(() => {
+  delete (globalThis as RuntimeGlobal).__RADAR_RUNTIME_CONFIG__
+})
+
+describe('assetUrl at the root (no base path)', () => {
+  it('leaves absolute paths untouched', () => {
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/images/radar/radar-icon.svg')
+  })
+
+  it('makes Vite-relative asset paths absolute', () => {
+    expect(assetUrl('./assets/index-abc.js')).toBe('/assets/index-abc.js')
+    expect(assetUrl('assets/index-abc.js')).toBe('/assets/index-abc.js')
+  })
+
+  it('unwraps the webpack/Next StaticImageData shape', () => {
+    expect(assetUrl({ src: '/_next/static/x.png' })).toBe('/_next/static/x.png')
+  })
+
+  // An app route may contain an "/assets/" segment (e.g. a namespace named
+  // "assets"). That must not be mistaken for a base path.
+  it('ignores an /assets/ segment in the current app route', () => {
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/images/radar/radar-icon.svg')
+  })
+})
+
+describe('assetUrl under a base path', () => {
+  it('prefixes absolute and relative asset paths', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/radar/images/radar/radar-icon.svg')
+    expect(assetUrl('./assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+    expect(assetUrl('assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+  })
+
+  it('is idempotent for already-prefixed paths', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('/radar/assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+  })
+
+  it('leaves protocol-relative URLs alone', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('//cdn.example.com/x.png')).toBe('//cdn.example.com/x.png')
+  })
+
+  it('handles a nested base path', () => {
+    setAssetBase('/tools/radar')
+    expect(assetUrl('/favicon.svg')).toBe('/tools/radar/favicon.svg')
+  })
+})
+
+describe('assetUrl inside a Worker', () => {
+  it('recovers the base path from the worker script URL', () => {
+    asWorkerAt('/radar/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/radar/images/x.svg')
+    })
+  })
+
+  it('resolves to the root when the worker is served from the root', () => {
+    asWorkerAt('/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/images/x.svg')
+    })
+  })
+
+  // The base path may itself contain "/assets/" — split on the last one.
+  it('splits on the last /assets/ segment', () => {
+    asWorkerAt('/host/assets/radar/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/host/assets/radar/images/x.svg')
+    })
+  })
+
+  it('prefers the injected config over the URL heuristic', () => {
+    setAssetBase('/radar')
+    asWorkerAt('/somewhere/assets/worker.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/radar/images/x.svg')
+    })
+  })
+})

package/src/utils/asset-url.ts

@@ -9,5 +9,37 @@
 export type AssetImport = string | { src: string }
 
 export function assetUrl(asset: AssetImport): string {
-  return typeof asset === 'string' ? asset : asset.src
+  const url = typeof asset === 'string' ? asset : asset.src
+  const assetBase = getRuntimeAssetBase()
+  if (!assetBase || url.startsWith('//') || url === assetBase || url.startsWith(`${assetBase}/`)) {
+    if (url.startsWith('./assets/')) return `/assets/${url.slice('./assets/'.length)}`
+    if (url.startsWith('assets/')) return `/${url}`
+    return url
+  }
+  if (url.startsWith('./')) return `${assetBase}/${url.slice(2)}`
+  if (!url.startsWith('/') && url.startsWith('assets/')) return `${assetBase}/${url}`
+  if (!url.startsWith('/')) return url
+  return `${assetBase}${url}`
+}
+
+function getRuntimeAssetBase(): string {
+  if (typeof globalThis === 'undefined') return ''
+  const runtime = (globalThis as typeof globalThis & {
+    __RADAR_RUNTIME_CONFIG__?: { assetBase?: string }
+  }).__RADAR_RUNTIME_CONFIG__
+  const configured = runtime?.assetBase?.replace(/\/+$/, '')
+  if (configured) return configured
+
+  // A Worker has its own global scope, so it never sees the runtime config the
+  // server injects into index.html — but its own script URL sits at
+  // `<base>/assets/<chunk>.js`, so the base can be recovered from it. Restricted
+  // to worker scopes on purpose: on the main thread `pathname` is an app route,
+  // which may legitimately contain an "/assets/" segment (a namespace or
+  // resource named "assets") and would yield a bogus prefix for every asset.
+  if (typeof window !== 'undefined') return ''
+  const pathname = globalThis.location?.pathname ?? ''
+  // lastIndexOf, not indexOf: the base path itself may contain "/assets/".
+  const assetsIndex = pathname.lastIndexOf('/assets/')
+  if (assetsIndex > 0) return pathname.slice(0, assetsIndex)
+  return ''
 }

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './format'
 export * from './pluralize'
+export * from './asset-url'
 export * from './badge-colors'
 export * from './resource-icons'
 export * from './navigation'