Improve tenant slug field

__tests__/e2e/admin/collections/tenants.e2e.spec.ts

@@ -4,6 +4,7 @@ import {
   CollectionSlugs,
   getSelectInputOptions,
   getSelectInputValue,
+  isSelectReadOnly,
   openDocControls,
   selectInput,
   waitForFormReady,
@@ -58,22 +59,28 @@ authTest.describe('Tenants', () => {
   authTest.describe('Read', () => {
     authTest.describe.configure({ timeout: 60000 })
 
-    authTest('slug field shows current value on existing tenant', async ({ adminPage }) => {
-      await adminPage.goto(tenantsUrl.list)
-      await adminPage.waitForLoadState('networkidle')
+    authTest(
+      'slug field shows current value and read-only on existing tenant',
+      async ({ adminPage }) => {
+        await adminPage.goto(tenantsUrl.list)
+        await adminPage.waitForLoadState('networkidle')
 
-      const firstLink = adminPage.locator('table tbody tr td a').first()
-      await firstLink.waitFor({ timeout: 15000 })
-      await firstLink.click()
-      await adminPage.waitForURL(/\/collections\/tenants\/\d+/)
-      await waitForFormReady(adminPage)
+        const firstLink = adminPage.locator('table tbody tr td a').first()
+        await firstLink.waitFor({ timeout: 15000 })
+        await firstLink.click()
+        await adminPage.waitForURL(/\/collections\/tenants\/\d+/)
+        await waitForFormReady(adminPage)
 
-      const slugField = adminPage.locator('#field-slug')
-      await expect(slugField).toBeVisible()
+        const slugField = adminPage.locator('#field-slug')
+        await expect(slugField).toBeVisible()
 
-      const value = await getSelectInputValue({ selectLocator: slugField })
-      expect(value).toBeTruthy()
-    })
+        const value = await getSelectInputValue({ selectLocator: slugField })
+        expect(value).toBeTruthy()
+
+        const readOnly = await isSelectReadOnly({ selectLocator: slugField })
+        expect(readOnly).toBe(true)
+      },
+    )
   })
 
   authTest.describe('Delete', () => {

src/collections/Tenants/components/SlugCell.tsx

@@ -0,0 +1,6 @@
+import type { DefaultServerCellComponentProps } from 'payload'
+
+export function SlugCell({ cellData }: Pick<DefaultServerCellComponentProps, 'cellData'>) {
+  if (typeof cellData !== 'string') return null
+  return <>{cellData.toUpperCase()}</>
+}

src/collections/Tenants/components/TenantSlugField.tsx

@@ -1,12 +1,30 @@
 import type { SelectFieldServerComponent } from 'payload'
 
-import { SelectField } from '@payloadcms/ui'
+import { SelectField, SelectInput } from '@payloadcms/ui'
 
 export const TenantSlugField: SelectFieldServerComponent = async ({
   clientField,
+  data,
   field,
   payload,
 }) => {
+  const currentSlug = data?.slug
+  // Slug is immutable after creation
+  if (data.id) {
+    return (
+      <SelectInput
+        name={field.name}
+        path={field.name}
+        label={clientField.label}
+        description={clientField.admin?.description}
+        options={[{ label: String(currentSlug).toUpperCase(), value: currentSlug }]}
+        value={currentSlug}
+        required
+        readOnly
+      />
+    )
+  }
+
   const { docs } = await payload.find({
     collection: 'tenants',
     limit: 0,
@@ -18,7 +36,8 @@ export const TenantSlugField: SelectFieldServerComponent = async ({
 
   const options = clientField.options?.filter((option) => {
     const value = typeof option === 'string' ? option : option.value
-    return !usedSlugs.has(value)
+    // Keep the current document's slug so the label displays correctly
+    return value === currentSlug || !usedSlugs.has(value)
   })
 
   return <SelectField field={{ ...clientField, options }} path={field.name} />

src/collections/Tenants/index.ts

@@ -53,12 +53,13 @@ export const Tenants: CollectionConfig = {
       type: 'select',
       admin: {
         components: {
+          Cell: '@/collections/Tenants/components/SlugCell#SlugCell',
           Field: '@/collections/Tenants/components/TenantSlugField#TenantSlugField',
         },
         description: 'Avalanche center identifier. Used for subdomains and URL paths.',
       },
       options: VALID_TENANT_SLUGS.map((slug) => ({
-        label: `${AVALANCHE_CENTERS[slug].name} (${slug})`,
+        label: `${slug.toUpperCase()} — ${AVALANCHE_CENTERS[slug].name}`,
         value: slug,
       })),
       index: true,