fix(slugs): sync mirrored names reliably

Author: Andreas-Froyland

components/settings/SettingsTeam.vue

@@ -195,7 +195,6 @@
               data-testid="team-create-name"
               v-model="newTeamName"
               placeholder="Platform Team"
-              @input="generateNewTeamSlug"
             />
           </div>
           <div class="space-y-2">
@@ -324,6 +323,12 @@ export default {
     },
   },
 
+  watch: {
+    newTeamName(newName) {
+      this.newTeamSlug = this.slugify(newName)
+    },
+  },
+
   async mounted() {
     await this.initialize()
 
@@ -567,8 +572,8 @@ export default {
       }
     },
 
-    generateNewTeamSlug() {
-      this.newTeamSlug = this.newTeamName
+    slugify(value) {
+      return value
         .toLowerCase()
         .replace(/[^a-z0-9\s-]/g, '')
         .replace(/\s+/g, '-')

pages/onboarding/index.vue

@@ -39,15 +39,14 @@
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form @submit.prevent="createWorkspace" class="space-y-4">
+            <form class="space-y-4" @submit.prevent="createWorkspace">
               <div class="space-y-2">
                 <Label for="org-name">Workspace name</Label>
                 <Input
                   id="org-name"
                   v-model="orgName"
                   placeholder="Acme Inc."
                   :disabled="isCreatingOrg"
-                  @input="generateSlug"
                 />
               </div>
               <div class="space-y-2">
@@ -257,9 +256,15 @@ export default {
     },
   },
 
+  watch: {
+    orgName(newName) {
+      this.orgSlug = this.slugify(newName)
+    },
+  },
+
   methods: {
-    generateSlug() {
-      this.orgSlug = this.orgName
+    slugify(value) {
+      return value
         .toLowerCase()
         .replace(/[^a-z0-9\s-]/g, '')
         .replace(/\s+/g, '-')

tests/e2e/auth-settings-teams.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test'
 import { expectRedirectToLogin, loginViaProgrammaticPage, loginViaUi } from './helpers/auth'
 import { selectors } from './helpers/selectors'
-import { createTeamFromSettings, getActiveTeamViaApi, switchTeamFromSidebar } from './helpers/teams'
+import { createTeamFromSettings, ensureTeamAndOrganizationContext, getActiveTeamViaApi, switchTeamFromSidebar } from './helpers/teams'
 
 const TEST_EMAIL = process.env.E2E_USER_EMAIL || 'test@preview.local'
 const TEST_PASSWORD = process.env.E2E_USER_PASSWORD || 'password123'
@@ -16,6 +16,48 @@ test('user can sign in through login form and land in dashboard', async ({ page
   await loginViaUi(page, { email: TEST_EMAIL, password: TEST_PASSWORD })
 })
 
+test('onboarding slug mirrors the full workspace name while typing', async ({ page }) => {
+  await loginViaProgrammaticPage(page, { email: TEST_EMAIL, password: TEST_PASSWORD })
+
+  await page.goto('/onboarding')
+  await expect(page.getByRole('heading', { name: 'Create your workspace' })).toBeVisible()
+
+  const workspaceNameInput = page.getByLabel('Workspace name')
+  const workspaceSlugInput = page.getByLabel('URL')
+
+  await workspaceNameInput.click()
+  await workspaceNameInput.type('Frogbyte', { delay: 40 })
+  await expect(workspaceSlugInput).toHaveValue('frogbyte')
+
+  await workspaceNameInput.type(' Labs', { delay: 40 })
+  await expect(workspaceSlugInput).toHaveValue('frogbyte-labs')
+})
+
+test('team creation slug mirrors the full team name while typing', async ({ page }) => {
+  await loginViaProgrammaticPage(page, { email: TEST_EMAIL, password: TEST_PASSWORD })
+  await ensureTeamAndOrganizationContext(page.request)
+
+  await page.goto('/settings#team')
+  await page.waitForFunction(() => {
+    const tab = document.querySelector('[data-testid="settings-tab-team"]') as any
+    return Boolean(tab?.__vueParentComponent)
+  })
+
+  await expect(page.locator(selectors.teamOpenCreateDialog)).toBeVisible({ timeout: 20_000 })
+  await page.locator(selectors.teamOpenCreateDialog).click()
+
+  const createDialog = page.getByRole('dialog', { name: 'Create Team' })
+  const teamNameInput = createDialog.getByLabel('Team Name')
+  const teamSlugInput = createDialog.getByLabel('Subdomain Slug')
+
+  await teamNameInput.click()
+  await teamNameInput.type('DotMatrixLabs', { delay: 40 })
+  await expect(teamSlugInput).toHaveValue('dotmatrixlabs')
+
+  await teamNameInput.type(' Ops', { delay: 40 })
+  await expect(teamSlugInput).toHaveValue('dotmatrixlabs-ops')
+})
+
 test('settings navigation tabs render expected sections', async ({ page }) => {
   await loginViaProgrammaticPage(page, { email: TEST_EMAIL, password: TEST_PASSWORD })
 

tests/e2e/helpers/teams.ts

@@ -81,7 +81,7 @@ async function addCurrentUserToTeam(request: APIRequestContext, teamId: string)
   throw new Error(`Failed to add current user to created team: ${message}`)
 }
 
-async function ensureTeamAndOrganizationContext(request: APIRequestContext) {
+export async function ensureTeamAndOrganizationContext(request: APIRequestContext) {
   const activeResponse = await request.get('/api/teams/active')
   if (activeResponse.ok()) {
     return