feat(dashboard): auto-slug app names and infer route host kind from input
Two related polish passes on forms the operator hits most. App create form: the slug field used to come before the name field and demanded the operator hand-roll a valid slug. Now the name field comes first and the slug is derived from it live, GitLab-style — Unicode NFKD-decomposed, combining marks stripped (so `Café` → `cafe`), `ß` mapped to `ss`, non-`[a-z0-9]` runs collapsed to `-`, trimmed and capped at the backend's 63-char limit. The auto-sync releases as soon as the operator edits the slug manually, and re-engages if they clear it. The slug input itself runs every keystroke and paste through the same normalizer, so dirty input never reaches the form state. Route create form: the three-way host-kind `<select>` plus a sometimes- disabled input was confusing — operators routinely picked the wrong kind, typed a host the app didn't claim, and only saw the error after hitting Create. Replace with a single text input that infers the kind from what's there (`*` → any, `*.foo.com` → wildcard, `foo.com` → strict), shows the detected kind as a colored chip beside the field, and suggests the app's existing domain claims via a `<datalist>`. The same matching logic the backend runs in `validate_route_host_against_app` now lives in `route-utils.ts` so the form can surface a soft "not covered by any claim" warning *before* submit. Path also pre-fills to `/` so the most common case is one click away. Lockfile drift from `npm install` (pre-existing 0.5.0 → 0.5.1 version sync, npm metadata cleanup) is folded in here since it surfaced during this work. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
30
dashboard/src/lib/slugify.ts
Normal file
30
dashboard/src/lib/slugify.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
// Slug normalization for app slugs, mirrored against the backend's
|
||||
// validate_slug rules in crates/manager-core/src/apps_api.rs:
|
||||
// - regex: ^[a-z0-9][a-z0-9-]{0,62}$
|
||||
// - 1..=63 chars, lowercase ascii alphanumerics + `-`
|
||||
// - must start with [a-z0-9]
|
||||
// - reserved words are enforced server-side only
|
||||
//
|
||||
// Normalization rules are GitLab-style (close to `Babosa::Latin#to_slug`):
|
||||
// 1. NFKD-decompose Unicode and drop combining marks (é → e, ñ → n,
|
||||
// ü → u, etc.).
|
||||
// 2. ß → ss (a single common case the strip-marks pass misses).
|
||||
// 3. Lowercase.
|
||||
// 4. Replace any run of non-[a-z0-9] with a single `-`.
|
||||
// 5. Trim leading/trailing `-`.
|
||||
// 6. Truncate to 63 chars.
|
||||
|
||||
export const SLUG_MAX = 63;
|
||||
|
||||
export function slugify(input: string): string {
|
||||
if (!input) return '';
|
||||
let s = input.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
|
||||
s = s.toLowerCase().replace(/ß/g, 'ss');
|
||||
s = s.replace(/[^a-z0-9]+/g, '-');
|
||||
s = s.replace(/^-+|-+$/g, '');
|
||||
if (s.length > SLUG_MAX) {
|
||||
// Truncate, then re-trim in case the cut landed on a `-`.
|
||||
s = s.slice(0, SLUG_MAX).replace(/-+$/g, '');
|
||||
}
|
||||
return s;
|
||||
}
|
||||
Reference in New Issue
Block a user