feat: hide slug field buttons when field is read-only (#14824)

The Generate and Lock/Unlock buttons serve no purpose when the field is
read-only.

---------

Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: jefferyto

packages/ui/src/fields/Slug/index.tsx

@@ -17,13 +17,9 @@ import './index.scss'
 /**
  * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.
  */
-export const SlugField: React.FC<SlugFieldClientProps> = ({
-  field,
-  path,
-  readOnly: readOnlyFromProps,
-  useAsSlug,
-}) => {
-  const { label } = field
+export const SlugField: React.FC<SlugFieldClientProps> = ({ field, path, useAsSlug }) => {
+  const { admin, label } = field
+  const { readOnly: readOnlyFromProps } = admin || {}
 
   const { t } = useTranslation()
 
@@ -79,14 +75,16 @@ export const SlugField: React.FC<SlugFieldClientProps> = ({
     <div className="field-type slug-field-component">
       <div className="label-wrapper">
         <FieldLabel htmlFor={`field-${path}`} label={label} />
-        {!isLocked && (
+        {!readOnlyFromProps && !isLocked && (
           <Button buttonStyle="none" className="lock-button" onClick={handleGenerate}>
             {t('authentication:generate')}
           </Button>
         )}
-        <Button buttonStyle="none" className="lock-button" onClick={toggleLock}>
-          {isLocked ? t('general:unlock') : t('general:lock')}
-        </Button>
+        {!readOnlyFromProps && (
+          <Button buttonStyle="none" className="lock-button" onClick={toggleLock}>
+            {isLocked ? t('general:unlock') : t('general:lock')}
+          </Button>
+        )}
       </div>
       <TextInput
         onChange={setValue}

test/fields/collections/SlugField/e2e.spec.ts

@@ -16,8 +16,8 @@ import {
   saveDocAndAssert,
 } from '../../../__helpers/e2e/helpers.js'
 import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
-import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../__helpers/shared/clearAndSeed/reInitializeDB.js'
+import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { RESTClient } from '../../../__helpers/shared/rest.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { slugFieldsSlug } from '../../slugs.js'
@@ -162,6 +162,30 @@ describe('SlugField', () => {
     })
   })
 
+  describe('read-only slug field', () => {
+    test('should hide lock and generate buttons when slug field is read-only', async () => {
+      await page.goto(url.create)
+      await page.locator('#field-title').waitFor()
+
+      const readOnlySlugField = page
+        .locator('.slug-field-component')
+        .filter({ has: page.locator('#field-readOnlySlug') })
+
+      await expect(readOnlySlugField.locator('.lock-button')).toHaveCount(0)
+    })
+
+    test('should show lock button for non-read-only slug fields', async () => {
+      await page.goto(url.create)
+      await page.locator('#field-title').waitFor()
+
+      const regularSlugField = page
+        .locator('.slug-field-component')
+        .filter({ has: page.locator('#field-slug') })
+
+      await expect(regularSlugField.locator('.lock-button')).toBeVisible()
+    })
+  })
+
   describe('A11y', () => {
     test('Edit view should have no accessibility violations', async ({}, testInfo) => {
       await page.goto(url.create)

test/fields/collections/SlugField/index.ts

@@ -1,4 +1,4 @@
-import type { CollectionConfig } from 'payload'
+import type { CollectionConfig, TextField } from 'payload'
 
 import { slugField } from 'payload'
 
@@ -33,6 +33,24 @@ const SlugField: CollectionConfig = {
       required: false,
       checkboxName: 'generateLocalizedSlug',
     }),
+    slugField({
+      name: 'readOnlySlug',
+      checkboxName: 'generateReadOnlySlug',
+      required: false,
+      overrides: (defaultField) => {
+        console.log({ field: defaultField.fields[1] })
+        defaultField.fields[1].admin.readOnly = true
+
+        return defaultField
+      },
+    }),
+    {
+      type: 'text',
+      name: 'test',
+      admin: {
+        readOnly: true,
+      },
+    },
   ],
 }