Fix name validation when last character is a capital letter (#2101)

fix validation when last character of name is a capital letter

Author: david-crespo

app/components/form/fields/NameField.spec.tsx

@@ -11,16 +11,22 @@ import { validateName } from './NameField'
 
 describe('validateName', () => {
   const validate = (name: string) => validateName(name, 'Name', true)
+
   it('returns undefined for valid names', () => {
     expect(validate('abc')).toBeUndefined()
     expect(validate('abc-def')).toBeUndefined()
     expect(validate('abc9-d0ef-6')).toBeUndefined()
   })
 
   it('detects names starting with something other than lower-case letter', () => {
-    expect(validate('Abc')).toEqual('Must start with a lower-case letter')
     expect(validate('9bc')).toEqual('Must start with a lower-case letter')
-    expect(validate('Abc-')).toEqual('Must start with a lower-case letter')
+  })
+
+  // this fails if we check last letter before we check all chars
+  it('gives correct error on ending with capital letter', () => {
+    expect(validate('freeBSD')).toEqual(
+      'Can only contain lower-case letters, numbers, and dashes'
+    )
   })
 
   it('requires names to end with letter or number', () => {
@@ -29,13 +35,13 @@ describe('validateName', () => {
   })
 
   it('rejects invalid characters', () => {
-    expect(validate('aBc')).toEqual(
-      'Can only contain lower-case letters, numbers, and dashes'
-    )
-    expect(validate('asldk:c')).toEqual(
-      'Can only contain lower-case letters, numbers, and dashes'
-    )
+    const err = 'Can only contain lower-case letters, numbers, and dashes'
+    expect(validate('aBc')).toEqual(err)
+    expect(validate('asldk:c')).toEqual(err)
+    expect(validate('Abc-')).toEqual(err)
+    expect(validate('Abc')).toEqual(err)
   })
+
   it('rejects names that are too long', () => {
     expect(validate('a'.repeat(64))).toEqual('Must be 63 characters or fewer')
   })

app/components/form/fields/NameField.tsx

@@ -41,11 +41,11 @@ export const validateName = (name: string, label: string, required: boolean) =>
 
   if (name.length === 0) {
     return `${label} is required`
+  } else if (!/^[a-z0-9-]+$/.test(name)) {
+    return 'Can only contain lower-case letters, numbers, and dashes'
   } else if (!/^[a-z]/.test(name)) {
     return 'Must start with a lower-case letter'
   } else if (!/[a-z0-9]$/.test(name)) {
     return 'Must end with a letter or number'
-  } else if (!/^[a-z0-9-]+$/.test(name)) {
-    return 'Can only contain lower-case letters, numbers, and dashes'
   }
 }

test/e2e/project-create.e2e.ts

@@ -35,7 +35,9 @@ test.describe('Project create', () => {
     // submit to trigger validation
     await page.getByRole('button', { name: 'Create project' }).click()
 
-    await expect(page.getByText('Must start with a lower-case letter').nth(0)).toBeVisible()
+    await expect(
+      page.getByText('Can only contain lower-case letters, numbers, and dashes').nth(0)
+    ).toBeVisible()
   })
 
   test('shows form-level error for known server error', async ({ page }) => {