@skyhook-io/k8s-ui 1.5.10 → 1.5.12

package/src/utils/validators.test.ts

@@ -0,0 +1,207 @@
+import { describe, it, expect } from 'vitest'
+import {
+  validateRFC1123Label,
+  validateRFC1123Subdomain,
+  validateHelmReleaseName,
+  validatePort,
+} from './validators'
+
+// Validation in user-facing forms is a silent-correctness-or-loud-error
+// boundary: a regression here either lets bad input through to the API
+// (helm install fails with a server-side 422 the user can't connect to
+// their action) or rejects valid input (user is locked out of a
+// legitimate name). Pin the canonical k8s / Helm rules so any drift
+// fails the test instead of the user.
+
+describe('validateRFC1123Label', () => {
+  it('accepts simple lowercase labels', () => {
+    expect(validateRFC1123Label('default').valid).toBe(true)
+    expect(validateRFC1123Label('my-app').valid).toBe(true)
+    expect(validateRFC1123Label('a').valid).toBe(true)
+    expect(validateRFC1123Label('a1').valid).toBe(true)
+    expect(validateRFC1123Label('1a').valid).toBe(true)
+  })
+
+  it('rejects empty input', () => {
+    const r = validateRFC1123Label('')
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/empty/)
+  })
+
+  it('rejects uppercase characters and special chars', () => {
+    const r = validateRFC1123Label('INVALID_NAME!@#')
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/lowercase/)
+  })
+
+  it('rejects underscores, spaces, and other special characters', () => {
+    expect(validateRFC1123Label('my_app').valid).toBe(false)
+    expect(validateRFC1123Label('my app').valid).toBe(false)
+    expect(validateRFC1123Label('my.app').valid).toBe(false)
+    expect(validateRFC1123Label('my!app').valid).toBe(false)
+  })
+
+  it('rejects names with leading or trailing hyphens', () => {
+    expect(validateRFC1123Label('-app').valid).toBe(false)
+    expect(validateRFC1123Label('app-').valid).toBe(false)
+  })
+
+  it('rejects names longer than 63 characters', () => {
+    const r = validateRFC1123Label('a'.repeat(64))
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/63/)
+  })
+
+  it('accepts a name exactly 63 characters long (boundary)', () => {
+    expect(validateRFC1123Label('a'.repeat(63)).valid).toBe(true)
+  })
+})
+
+describe('validateRFC1123Subdomain', () => {
+  it('accepts dotted subdomains', () => {
+    expect(validateRFC1123Subdomain('foo.bar').valid).toBe(true)
+    expect(validateRFC1123Subdomain('foo.bar.baz').valid).toBe(true)
+    expect(validateRFC1123Subdomain('foo').valid).toBe(true)
+  })
+
+  it('rejects names with consecutive dots or trailing dots', () => {
+    expect(validateRFC1123Subdomain('foo..bar').valid).toBe(false)
+    expect(validateRFC1123Subdomain('foo.').valid).toBe(false)
+    expect(validateRFC1123Subdomain('.foo').valid).toBe(false)
+  })
+
+  it('rejects uppercase', () => {
+    expect(validateRFC1123Subdomain('Foo.bar').valid).toBe(false)
+  })
+
+  it('rejects names longer than 253 characters', () => {
+    const seg = 'a'.repeat(60)
+    const tooLong = `${seg}.${seg}.${seg}.${seg}.${seg}` // 60*5 + 4 dots = 304
+    const r = validateRFC1123Subdomain(tooLong)
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/253/)
+  })
+
+  it('rejects single labels longer than 63 chars even when total is under 253', () => {
+    // K8s' IsDNS1123Subdomain enforces ≤ 63 chars per dot-
+    // separated label on top of the 253-char total. Without the
+    // per-label check, a single 200-char label slipped through
+    // client-side and was rejected only server-side.
+    const huge = 'a'.repeat(200)
+    const r = validateRFC1123Subdomain(huge)
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/63/)
+  })
+
+  it('accepts a 63-char label at the boundary', () => {
+    expect(validateRFC1123Subdomain('a'.repeat(63)).valid).toBe(true)
+  })
+
+  it('rejects only the offending label when other labels are fine', () => {
+    const r = validateRFC1123Subdomain(`ok.${'a'.repeat(64)}.also-ok`)
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/63/)
+  })
+})
+
+describe('validateHelmReleaseName', () => {
+  it('rejects names with spaces and special characters', () => {
+    const r = validateHelmReleaseName('Invalid Name With Spaces!')
+    expect(r.valid).toBe(false)
+  })
+
+  it('accepts legal release names', () => {
+    expect(validateHelmReleaseName('nginx').valid).toBe(true)
+    expect(validateHelmReleaseName('my-nginx-1').valid).toBe(true)
+  })
+
+  it('rejects release names longer than 53 characters', () => {
+    const r = validateHelmReleaseName('a'.repeat(54))
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/53/)
+  })
+
+  it('accepts a name exactly 53 characters long (boundary)', () => {
+    expect(validateHelmReleaseName('a'.repeat(53)).valid).toBe(true)
+  })
+
+  it('error string has no trailing period (call-site composition convention)', () => {
+    // ValidationResult contract: error strings have no trailing
+    // period — the caller composes them into sentences and adds
+    // its own. InstallWizard renders `Release name {error}.` so a
+    // trailing period in this error string produced "...limit.." in
+    // the UI when a user exceeded the cap.
+    const r = validateHelmReleaseName('a'.repeat(54))
+    if (r.valid) throw new Error('expected invalid')
+    expect(r.error.endsWith('.')).toBe(false)
+  })
+
+  it('rejects dotted names (generated resource names must be DNS-1123 labels)', () => {
+    // Helm itself permits dots, but generated resource names like
+    // `<release>-<chart>-<hash>` must be valid labels. Catch the dot
+    // up front instead of letting K8s reject the apply server-side.
+    expect(validateHelmReleaseName('my.app').valid).toBe(false)
+    expect(validateHelmReleaseName('foo.bar.baz').valid).toBe(false)
+  })
+})
+
+describe('validatePort', () => {
+  it('accepts ports in [1, 65535]', () => {
+    for (const p of [1, 80, 443, 8080, 65535]) {
+      const r = validatePort(p)
+      expect(r.valid).toBe(true)
+      if (r.valid) expect(r.value).toBe(p)
+    }
+  })
+
+  it('accepts string ports', () => {
+    const r = validatePort('8080')
+    expect(r.valid).toBe(true)
+    if (r.valid) expect(r.value).toBe(8080)
+  })
+
+  it('rejects 0', () => {
+    const r = validatePort('0')
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/0 is reserved|between 1/)
+  })
+
+  it('rejects negative numbers', () => {
+    const r = validatePort('-1')
+    expect(r.valid).toBe(false)
+  })
+
+  it('rejects ports above 65535', () => {
+    const r = validatePort('70000')
+    expect(r.valid).toBe(false)
+    if (!r.valid) expect(r.error).toMatch(/65535|between/)
+  })
+
+  it('rejects empty input', () => {
+    expect(validatePort('').valid).toBe(false)
+  })
+
+  it('rejects non-integer formats (decimals, scientific, signed, padded)', () => {
+    expect(validatePort('1.0').valid).toBe(false)
+    expect(validatePort('1e3').valid).toBe(false)
+    expect(validatePort('+1').valid).toBe(false)
+    expect(validatePort(' 80 ').valid).toBe(false)
+    expect(validatePort('80abc').valid).toBe(false)
+  })
+
+  it('does not silently truncate (the "70000 → 7000" maxlength bug)', () => {
+    // The browser's number input was effectively dropping the 5th digit
+    // on certain triple-select+type sequences. Our validator must NOT
+    // accept the truncated value silently — it must reject the full
+    // string the user typed.
+    const r = validatePort('70000')
+    expect(r.valid).toBe(false)
+    // Make sure we don't accidentally massage the value into 7000 just
+    // because that happens to be a valid port.
+    if (!r.valid) {
+      // No `value` field on the failure shape — guarantees we never
+      // pretend the user typed something else.
+      expect((r as unknown as { value?: number }).value).toBeUndefined()
+    }
+  })
+})

package/src/utils/validators.ts

@@ -0,0 +1,178 @@
+// Pure validators for user-provided form inputs.
+//
+// Centralised here so the same rules apply to every form (Helm install
+// release name, Audit Settings ignored namespaces, Port Forward local
+// port, anything else that lands later). Reasons live next to the
+// constraints so reviewers can sanity-check us against the underlying
+// Kubernetes / Helm specs instead of folklore.
+
+/**
+ * Result shape for all validators. `valid: true` is success; otherwise
+ * `error` is a short, user-readable explanation suitable for inline
+ * form feedback (no leading capital, no trailing period — call sites
+ * compose them into sentences).
+ */
+export type ValidationResult =
+  | { valid: true }
+  | { valid: false; error: string }
+
+const RFC1123_LABEL_MAX = 63
+// Kubernetes namespace / pod / service names are RFC 1123 labels:
+// lowercase alphanumeric or '-', start and end alphanumeric, ≤63 chars.
+// Source: k8s.io/apimachinery/pkg/util/validation.IsDNS1123Label.
+const RFC1123_LABEL_RE = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/
+
+const RFC1123_SUBDOMAIN_MAX = 253
+// RFC 1123 subdomain = one or more labels joined by '.', total ≤253.
+const RFC1123_SUBDOMAIN_RE =
+  /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/
+
+const HELM_RELEASE_NAME_MAX = 53
+// Helm release names: DNS subdomain plus the additional limit of 53
+// chars so the generated resource names (`<release>-<chart>-<hash>`)
+// fit under the 63-char label cap. Source:
+// https://helm.sh/docs/chart_best_practices/conventions/#chart-names
+
+/**
+ * Validates a Kubernetes RFC 1123 label. Used for namespace names,
+ * pod / service / configmap / secret names — anything Kubernetes
+ * accepts as a single-segment identifier.
+ */
+export function validateRFC1123Label(input: string): ValidationResult {
+  if (input.length === 0) {
+    return { valid: false, error: 'must not be empty' }
+  }
+  if (input.length > RFC1123_LABEL_MAX) {
+    return {
+      valid: false,
+      error: `must be at most ${RFC1123_LABEL_MAX} characters (got ${input.length})`,
+    }
+  }
+  if (input !== input.toLowerCase()) {
+    return {
+      valid: false,
+      error: 'must be lowercase (Kubernetes names are case-sensitive and only allow [a-z0-9-])',
+    }
+  }
+  if (!RFC1123_LABEL_RE.test(input)) {
+    return {
+      valid: false,
+      error: 'must contain only lowercase letters, numbers, and hyphens, and start/end with a letter or number',
+    }
+  }
+  return { valid: true }
+}
+
+/**
+ * Validates a Kubernetes RFC 1123 subdomain (labels joined by dots).
+ * Used for Helm chart names, image registries — anything that allows
+ * dotted segments. NOT for pod/namespace names; use the label form.
+ */
+export function validateRFC1123Subdomain(input: string): ValidationResult {
+  if (input.length === 0) {
+    return { valid: false, error: 'must not be empty' }
+  }
+  if (input.length > RFC1123_SUBDOMAIN_MAX) {
+    return {
+      valid: false,
+      error: `must be at most ${RFC1123_SUBDOMAIN_MAX} characters (got ${input.length})`,
+    }
+  }
+  if (input !== input.toLowerCase()) {
+    return {
+      valid: false,
+      error: 'must be lowercase',
+    }
+  }
+  if (!RFC1123_SUBDOMAIN_RE.test(input)) {
+    return {
+      valid: false,
+      error: 'must contain only lowercase letters, numbers, hyphens, and dots, and each segment must start/end with a letter or number',
+    }
+  }
+  // Per-label cap: K8s' IsDNS1123Subdomain enforces ≤ 63 chars
+  // PER dot-separated label on top of the 253-char total. The
+  // regex above doesn't catch that; without this check a single
+  // 200-char label passes here and only fails server-side.
+  for (const label of input.split('.')) {
+    if (label.length > RFC1123_LABEL_MAX) {
+      return {
+        valid: false,
+        error: `each dot-separated label must be at most ${RFC1123_LABEL_MAX} characters (got ${label.length} for "${label}")`,
+      }
+    }
+  }
+  return { valid: true }
+}
+
+/**
+ * Validates a Helm release name. Same shape as an RFC 1123 label
+ * (no dots) capped at 53 chars (Helm's hard limit; longer names
+ * produce resources that exceed K8s' 63-char label limit).
+ *
+ * Why label and not subdomain: Helm itself permits dots in release
+ * names, but most charts compose resource names as
+ * `<release>-<chart>-<hash>` which must be valid DNS-1123 labels.
+ * A dotted release name like `my.app` produces resources whose
+ * names fail K8s label validation server-side. Reject the dot up
+ * front so the user sees a clear inline error instead of a server
+ * 422 after submit.
+ */
+export function validateHelmReleaseName(input: string): ValidationResult {
+  if (input.length === 0) {
+    return { valid: false, error: 'must not be empty' }
+  }
+  if (input.length > HELM_RELEASE_NAME_MAX) {
+    return {
+      valid: false,
+      // No trailing period — call sites compose this into a sentence
+      // and append their own.
+      error: `must be at most ${HELM_RELEASE_NAME_MAX} characters (got ${input.length}); Helm caps release names so derived resource names fit under K8s' 63-char limit`,
+    }
+  }
+  return validateRFC1123Label(input)
+}
+
+/**
+ * Validates a TCP/UDP port number provided as a free-text input.
+ *
+ * Accepts:
+ *   - a number-like string with no whitespace, no leading zeros, no '+'
+ *   - in [1, 65535]
+ *
+ * Rejects '0' (reserved), negative numbers, fractional numbers,
+ * scientific notation, and anything containing non-digit characters.
+ *
+ * Returns the parsed integer alongside the validation result so call
+ * sites don't have to re-parse.
+ */
+export type PortValidationResult =
+  | { valid: true; value: number }
+  | { valid: false; error: string }
+
+export function validatePort(input: string | number): PortValidationResult {
+  // Coerce a number argument to its decimal string form so the same
+  // strict rules (no fractional, no NaN) apply regardless of how the
+  // value reached us. We then re-parse to integer.
+  const raw = typeof input === 'number' ? String(input) : input
+  if (raw === '' || raw == null) {
+    return { valid: false, error: 'port is required' }
+  }
+  // Reject anything other than digits — '+1', '1.0', '1e3', ' 80 '
+  // all fail here. Catching them as parse failures gives clearer
+  // feedback than silently truncating via Number().
+  if (!/^\d+$/.test(raw)) {
+    return {
+      valid: false,
+      error: 'port must be a whole number between 1 and 65535',
+    }
+  }
+  const n = Number(raw)
+  if (!Number.isInteger(n) || n < 1 || n > 65535) {
+    return {
+      valid: false,
+      error: 'port must be between 1 and 65535 (0 is reserved)',
+    }
+  }
+  return { valid: true, value: n }
+}

package/src/utils/view-transition.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from 'vitest'
+import { isInvalidStateError, startViewTransitionSafe } from './view-transition'
+
+// SKY-833 bug 49: rapid tab / route switches surfaced
+// "InvalidStateError: Transition was aborted because of invalid state"
+// as a console exception. The View Transitions API rejects the
+// `finished` promise with that error whenever a new transition
+// supersedes an in-flight one — which is the user's intent (they
+// clicked again), not a bug. These tests pin the rejection-
+// classification helper and the fallback path that's used when the
+// API isn't available (Firefox, older Safari, jsdom).
+
+describe('isInvalidStateError', () => {
+  it('returns true for objects whose name is "InvalidStateError"', () => {
+    expect(isInvalidStateError(new DOMException('boom', 'InvalidStateError'))).toBe(true)
+    expect(isInvalidStateError({ name: 'InvalidStateError', message: 'x' })).toBe(true)
+  })
+
+  it('returns false for any other shape', () => {
+    expect(isInvalidStateError(new Error('boom'))).toBe(false)
+    expect(isInvalidStateError({ name: 'TypeError' })).toBe(false)
+    expect(isInvalidStateError({})).toBe(false)
+    expect(isInvalidStateError('InvalidStateError')).toBe(false)
+    expect(isInvalidStateError(null)).toBe(false)
+    expect(isInvalidStateError(undefined)).toBe(false)
+  })
+})
+
+describe('startViewTransitionSafe', () => {
+  it('falls back to invoking update directly when the API is missing', () => {
+    const originalDoc = (globalThis as { document?: unknown }).document
+    ;(globalThis as { document: object }).document = {} // no startViewTransition
+
+    const update = vi.fn()
+    startViewTransitionSafe(update)
+    expect(update).toHaveBeenCalledTimes(1)
+
+    ;(globalThis as { document?: unknown }).document = originalDoc
+  })
+
+  it('uses the API when available and swallows InvalidStateError on the finished promise', async () => {
+    const originalDoc = (globalThis as { document?: unknown }).document
+
+    const update = vi.fn()
+    const startSpy = vi.fn((cb: () => void) => {
+      void cb // the real API invokes this; test doesn't need to
+      return {
+        finished: Promise.reject(new DOMException('superseded', 'InvalidStateError')),
+        ready: Promise.resolve(),
+        updateCallbackDone: Promise.resolve(),
+        skipTransition: () => {},
+      }
+    })
+    ;(globalThis as { document: object }).document = { startViewTransition: startSpy }
+
+    startViewTransitionSafe(update)
+    expect(startSpy).toHaveBeenCalledTimes(1)
+    // Argument is the update callback (the API itself invokes it).
+    expect(startSpy).toHaveBeenCalledWith(update)
+
+    // The unhandled rejection would surface here if we hadn't caught
+    // it. Awaiting a microtask yield is enough to flush the promise
+    // chain inside startViewTransitionSafe.
+    await Promise.resolve()
+    await Promise.resolve()
+
+    ;(globalThis as { document?: unknown }).document = originalDoc
+  })
+
+  it('only swallows InvalidStateError (verified via the classifier)', () => {
+    // Rather than triggering an actual unhandled rejection (which
+    // vitest treats as a test failure), pin the contract that
+    // startViewTransitionSafe relies on: InvalidStateError is the
+    // single name we suppress. Anything else returns false from the
+    // classifier and therefore propagates through the promise chain.
+    expect(isInvalidStateError(new DOMException('x', 'InvalidStateError'))).toBe(true)
+    expect(isInvalidStateError(new Error('something else broke'))).toBe(false)
+    expect(isInvalidStateError(new DOMException('x', 'AbortError'))).toBe(false)
+    expect(isInvalidStateError(new TypeError('y'))).toBe(false)
+  })
+})

package/src/utils/view-transition.ts

@@ -0,0 +1,62 @@
+/**
+ * Wrapper around `document.startViewTransition` that:
+ *
+ *   1. Falls back to a synchronous call to `update` when the View
+ *      Transitions API isn't available (older Safari, Firefox without
+ *      the flag, jsdom in tests).
+ *   2. Swallows the `InvalidStateError` that the API rejects with
+ *      whenever a new transition starts while a previous one is still
+ *      pending. This is a normal symptom of impatient users (clicking
+ *      tabs faster than 200ms) — the new transition has already
+ *      replaced the in-flight one, so there is nothing for the caller
+ *      to do. SKY-833 bug 49 surfaced this as a console exception
+ *      stack on rapid Secrets / drawer-tab navigation.
+ *
+ * Other rejection types (programming errors, unsupported configs)
+ * are re-thrown so we don't accidentally hide real bugs.
+ */
+export function startViewTransitionSafe(update: () => void): void {
+  // Some lib.dom.d.ts versions don't yet expose `startViewTransition`
+  // on Document. Narrow once via a typed cast.
+  const doc = document as Document & {
+    startViewTransition?: (cb: () => void) => {
+      finished: Promise<void>
+      ready: Promise<void>
+      updateCallbackDone: Promise<void>
+      skipTransition: () => void
+    }
+  }
+
+  if (typeof doc.startViewTransition !== 'function') {
+    update()
+    return
+  }
+
+  const transition = doc.startViewTransition(update)
+
+  // The `finished` promise rejects with InvalidStateError when a new
+  // transition supersedes this one. That's not an error condition for
+  // the user — they got what they wanted (the new state). Swallow it
+  // so it doesn't become a noisy console exception.
+  transition.finished.catch((err: unknown) => {
+    if (isInvalidStateError(err)) return
+    // Anything else really is unexpected — let it surface.
+    throw err
+  })
+}
+
+/**
+ * Predicate that classifies the rejection thrown by the View
+ * Transitions API when a new transition supersedes an in-flight one.
+ * Used by `startViewTransitionSafe` to know what to swallow, and
+ * exported so tests (and any future call site that wraps the API
+ * differently) can pin the exact name we treat as expected.
+ */
+export function isInvalidStateError(err: unknown): boolean {
+  return (
+    !!err &&
+    typeof err === 'object' &&
+    'name' in err &&
+    (err as { name: unknown }).name === 'InvalidStateError'
+  )
+}